How do I count how many checkboxes are selected on a page with jQuery

Question

I want to count how many checkboxes on my page are selected using jQuery. I've written the following code:

      var numberOfCheckboxesSelected = 0;
      $(':checkbox').each(function(checkbox) {
          if (checkbox.attr('checked'))
              numberOfCheckboxesSelected++;
      });

However, my code errors out with the message "Object doesn't support this property or method" on the third line.

How do I count how many checkboxes are selected on my page?

Answer 1

jQuery supports the :checked pseudo-selector.

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

This will work for radio buttons as well as checkboxes. If you just want checkboxes, but also have radio buttons on the page:

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

Answer 2

Try this(to avoid counting any selected radio buttons):

var numberOfCheckboxesSelected = $('input[type=checkbox]:checked').length; 

Answer 3

The first argument passed to the callback in each is the index, not the element. You should use this or a second argument:

$(':checkbox').each(function(idx, checkbox) {
      if (checkbox.attr('checked'))
          numberOfCheckboxesSelected++;
});

Moreover, the easier way to do this is to select only the checked elements with the :checked selector and then check the selection's length property:

var numberOfCheckboxesSelected = $('input:checkbox:checked').length;

Answer 4

$("input:checked").length

this will return the count of checked checkboxes.

Answer 5

$('#myDIV').on('change', 'input[type="checkbox"]', function(){
  var $checkbox = $('#myDIV').find('input[type="checkbox"]')
    $count = 0,
    $counter = $('#myDIV').find('.counter');
  $checkbox.each(function() {
    if ($(this).is(':checked')) {
      $count++;
    }
  });
  $counter.text($count);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV">
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <label>
    <input type="checkbox"> label
  </label>
  <br>
  <span class="counter">0</span>
</div>