Crafty Checkbox Selector [ leveraging jquery ]

Question

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like  after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked.

I have tried using methods like:

$(".elm:checked").length;

but it doesn't seem to work properly!

Below is an example of my code for counting checked checkboxes:

$(document).ready(function(){

    $(".mycheckbox").click(function(){

        $(".checkbox").click(function(){

            alert($(".checkbox:checked").length); // This returns 0 when a checkbox is checked and 1 when unchecked, which is incorrect. It should return 1 when checked and 0 when unchecked.

        });

    });
});

I believe this issue is caused by my fake checkboxes. When a user clicks on the fake checkbox, jQuery triggers a click event on the real checkbox, and then it works correctly!

Does anyone have any ideas or suggestions?

[Sorry, English is not my first language]

jsfiddle: http://jsfiddle.net/E2kjM/2/

javascript jquery html css

Answer 1

Answer №1

The selectors you are using in jQuery are incorrect. The code $('mycheckbox') is looking for a tag <mycheckbox> in your document, which most likely does not exist.

I assume that your custom checkboxes are created using CSS class names on  elements, such as . In this case, you should use the following:

$('.mycheckbox').length;
   ^--- This is the correct CSS class name selector

Answer 2

The selectors you are using in jQuery are incorrect. The code $('mycheckbox') is looking for a tag <mycheckbox> in your document, which most likely does not exist.

I assume that your custom checkboxes are created using CSS class names on  elements, such as . In this case, you should use the following:

$('.mycheckbox').length;
   ^--- This is the correct CSS class name selector

Answer 3

Answer №2

Opt for the term "change" over "click".

Example: http://jsfiddle.net/E2kjM/3/

Answer 4

Opt for the term "change" over "click".

Example: http://jsfiddle.net/E2kjM/3/

Answer 5

Answer №3

Give this a try,

Suppose we have two distinct classes, mycheckbox and checkbox, for which the click event is activated.

$(function(){ 
    $(".mycheckbox,.checkbox").click(function(){
        alert($(".checkbox:checked").length)); 
    });
});

Answer 6

Give this a try,

Suppose we have two distinct classes, mycheckbox and checkbox, for which the click event is activated.

$(function(){ 
    $(".mycheckbox,.checkbox").click(function(){
        alert($(".checkbox:checked").length)); 
    });
});

Answer 7

Answer №4

It's not advisable to have a click handler within another click handler. Consider using trigger(). Also, make sure you are selecting the correct element with the class .mycheckbox, as there is no tag called mycheckbox.

Here is an alternative approach:

 $(document).ready(function(){

    $(".mycheckbox").click(function(){
        $("checkbox").trigger('click');
    });

    $("checkbox").click(function(){

      alert($("checkbox:checked").length)); // This logic seems incorrect; it should return 1 when checked and 0 when unchecked

     });
  }

Answer 8

It's not advisable to have a click handler within another click handler. Consider using trigger(). Also, make sure you are selecting the correct element with the class .mycheckbox, as there is no tag called mycheckbox.

Here is an alternative approach:

 $(document).ready(function(){

    $(".mycheckbox").click(function(){
        $("checkbox").trigger('click');
    });

    $("checkbox").click(function(){

      alert($("checkbox:checked").length)); // This logic seems incorrect; it should return 1 when checked and 0 when unchecked

     });
  }

Answer 9

Answer №5

If you're looking for a way to implement counters in CSS, you might find Counter CSS helpful as well: http://codepen.io/gcyrillus/pen/mshLl

body {
    counter-reset: checboxes;
}
:checked {
    counter-increment:checboxes;
}
span:after {
    content: counter(checboxes)' checked'; 
}

Answer 10

If you're looking for a way to implement counters in CSS, you might find Counter CSS helpful as well: http://codepen.io/gcyrillus/pen/mshLl

body {
    counter-reset: checboxes;
}
:checked {
    counter-increment:checboxes;
}
span:after {
    content: counter(checboxes)' checked'; 
}

Crafty Checkbox Selector [ leveraging jquery ]

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Guide on implementing ng-options and ng-init functionalities in AngularJS

Hidden button trigger is malfunctioning

Verify the presence of a username using the bvalidator, a jQuery validation plugin

Ways to eliminate HTML elements from one HTML content to another

Steps for positioning the navigation bar beneath header 1

What could be causing my table to appear multiple times in the HTML when using jQuery?

What are the indicators of JSON in a response?

Storing canvas image on server using Jquery and PHP

A step-by-step guide on revealing a complete div upon selection

What are the steps for utilizing a button instead of an input field that is not within a form?

Error 404: Node.js and Express encountering issues with POST request to '/webhook' endpoint

Does ECMAScript differentiate between uppercase and lowercase letters?

Ensuring my form adjusts effortlessly to the sprites

Extract and loop through JSON data containing various headers

Chaining fade in and slide effects on a div element

Looking to sanitize an array of objects in Node.js? If you find that manually iterating through it only returns 'object Object', there are alternative methods to properly

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

Execute a function when a selection option is chosen consecutively two times

The dropdown feature in AngularJS experiencing sporadic malfunctions on Google Chrome

Secure your browsing experience with AngularJS authentication prompt