Count selected checkboxes using jquery.

Question

I'm trying to count the number of checkboxes that have been checked. But, the count remains 0 even though I click. Here is my code.

<div>
<input type="checkbox" class="category1"></input>
<input type="checkbox" class="category1"></input>
<input type="checkbox" class="category1"></input>
<input type="checkbox" class="category1"></input>
</div>

and my JS code is..

<script type="text/javascript">
        $(document).ready(function(){

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

                var category1Count = $('.category1 :checked').size();
                console.log(category1Count);
            });


        });
    </script>

There must be a simple mistake. Not able to find out. Where am I going wrong? Thanks in advance

.category1 :checked means, select all selected elements that are descendants of .category1 elements. Instead you want .category1:checked which means "select all .category1 elements which are also selected. — Felix Kling
– Felix Kling, Commented Jan 30, 2014 at 7:06

Hasib Tarafder · Accepted Answer · 2014-01-30 06:52:17Z

3

Use length property instead of size() method

Check the following code..

$('.category1:checked').length;

Check the following image.. enter image description here

And check the JSFIDDLE

edited Jan 30, 2014 at 6:52

answered Jan 30, 2014 at 6:43

Hasib Tarafder

5,8133 gold badges33 silver badges44 bronze badges

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

3 Comments

Felix Kling Over a year ago

Why should .length work instead of .size()? They are both the same.

Felix Kling Over a year ago

(of course .length is preferred and .size is deprecated, but that doesn't explain why .size() doesn't work. Hence the problem is likely something else.)

Felix Kling Over a year ago

@Rahul: .size() works, your selector is wrong. It's correct in this answer, but not explained. See my comment to your question.

Adil · Accepted Answer · 2014-01-30 07:00:13Z

3

Use length to get the count of elements. You also do not need space between .category1 and :checked

The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call. Reference.

Live Demo

var category1Count = $('.category1:checked').length;

edited Jan 30, 2014 at 7:00

answered Jan 30, 2014 at 6:41

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-01-30 07:07:50Z

2

size() and length both works but in the OP code he was just placing a space which causing not to work.

$('.category1 :checked') should be this: $('.category1:checked')

demo

answered Jan 30, 2014 at 7:07

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Comments

Sid M · Accepted Answer · 2014-01-30 06:44:16Z

0

Try

var category1Count = $("input:checkbox:checked").length;

answered Jan 30, 2014 at 6:44

Sid M

4,3744 gold badges33 silver badges51 bronze badges

Comments

NiiL · Accepted Answer · 2014-01-30 06:49:56Z

0

 $(document).ready(function(){
      $(".category1").click(function(){
          console.log($(":checkbox").filter(":checked").size());              
      });
 });

Fiddle Demo

answered Jan 30, 2014 at 6:49

NiiL

2,8371 gold badge29 silver badges37 bronze badges

Collectives™ on Stack Overflow

Count selected checkboxes using jquery.

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related