jQuery : Counting checked checkboxes - wrong count

Question

I have a code which counts the checked checkboxes. It works fine when selecting, but the count breaks (adds +1 to the count) when i deselect some of the already selected checkboxes.

HTML:

<div>Number of checkboxes checked: <span id='chck'>0</span></div>
<table>
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr>    
</table>

JS:

$('tr :checkbox').change(function(){

    $('#chck').text($(this).add(':checked').length);

});

FIDDLE: http://jsfiddle.net/kAsxj/

@MatthewRiches Yes i can see that now. I thought it was a function to add selector to the existing $this — Biker John
– Biker John, Commented Oct 7, 2013 at 15:03
It is to add a selector to the existing $this. But you don't check to see if $this is checked, originally. That's why you're off by one when you are deselecting. — andi
– andi, Commented Oct 7, 2013 at 15:04

Chris · Accepted Answer · 2013-10-07 15:02:55Z

1

http://jsfiddle.net/kAsxj/3/

Not sure why you're using $(this).add(':checked') when simply $(':checked') will suffice.

answered Oct 7, 2013 at 15:02

Chris

28.1k26 gold badges132 silver badges227 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anton · Accepted Answer · 2013-10-07 15:00:28Z

1

Try this

$('#chck').text($('input[type="checkbox"]:checked').length);
    //gets all input checkboxes

or for the specific table with inputs you can do this

$('#chck').text($(this).closest('table').find(':checked').length);
//gets all input checkboxes within the table

DEMO

answered Oct 7, 2013 at 15:00

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Comments

David Thomas · Accepted Answer · 2013-10-07 15:03:51Z

1

When you check or un-check a check-box the count doesn't automatically increase, so you'd need:

$('input[type="checkbox"]').change(function(){
    $('#chck').text($('input[type="checkbox"]:checked').length);
}).change();

JS Fiddle demo.

answered Oct 7, 2013 at 15:03

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

Venkata Krishna · Accepted Answer · 2013-10-07 15:10:42Z

1

DEMO

   $('tr :checkbox').change(function(){
        $('#chck').text($(':checkbox:checked').length);
    });

answered Oct 7, 2013 at 15:10

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

Collectives™ on Stack Overflow

jQuery : Counting checked checkboxes - wrong count

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related