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

Utilizing React JS to call a static function within another static function when an HTML button is clicked

NextJs does not allow external synchronous scripts

Updating an Image Using JavaScript

Tips for extracting CSS data with Selenium webdriver's executescript function

Is it possible to validate an email domain using node.js? For example, checking if gmail.com is a valid email domain, and ensuring that users do not enter incorrect variations such as egmail.com

Nextjs google places autocomplete not providing accurate suggestions

Getting Started with SimpleModal in ASP.NET: A Beginner's Guide

A Foolproof Method to Dynamically Toggle HTML Checkbox in ASP.NET Using JavaScript

Having trouble accessing an element using jQuery(idOfElement) with a variable as the name parameter

An error occurs when attempting to redirect with getServerSideProps

Managing field placement as the table height grows: tips and tricks

Husky and lint-staged failing to run on Windows due to 'command not found' error

What could be causing the mysql-event to not function properly in a Node.js environment?

A guide on crafting a test scenario for an AngularJS controller using the Jasmine framework

Can you please provide guidance on how to dynamically add number values from an array to a select tag in Vue.js?

Issue with changing image source on hover using JQuery not functioning as expected

Issue: Error occurs when using _.sample on an array containing nested arrays

CSS: element misplaced at the top instead of the bottom where it belongs

Leveraging split and map functions within JSX code

Tips for creating brief animations