jQuery Count Checked Checkboxes Examples
Have you ever wondered how to Count Checked Checkboxes using jQuery? In this article, I am going to show you with easy to follow examples how to use jQuery to Count Checked Checkboxes in 7 ways. I am going to discuss multiple ways to Count Checked Checkboxes, so you can use any of the method indicated in your app. Read on to find out how you can easily Count Checked Checkboxes using jQuery.
How to Easily Count Checked Checkboxes using jQuery – Examples
Let’s assume that we have an array of ‘fruits’ checkboxes. We have different values for each of these checkboxes and these set of values for the checkboxes are meant to act as an array. So we want to alert the count of the checked checkboxes when a button is clicked, using jQuery.
Example: Here is the full source to count checked checkboxes using jQuery
<html>
<head>
<title>jQuery Count Checked Checkboxes Examples </title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<p>
<label>
<input type="checkbox" name="fruits[]" class="fruits" value="apple" id="fruits_0">
Apple</label>
<br>
<label>
<input type="checkbox" name="fruits[]" class="fruits" value="mango" id="fruits_1">
Mango</label>
<br>
<label>
<input type="checkbox" name="fruits[]" class="fruits" value="grapes" id="fruits_2">
Grapes</label>
<br>
</p>
<input type="submit" name="btn_alert" id="btn_alert" value="Count Checked Checkboxes" />
<script type="text/javascript">
$(document).ready(function() {
$('#btn_alert').click(function(){
//Mehod 1
alert( 'Checked: '+ $(":checkbox:checked").length );
//Mehod 2
alert( 'Checked: '+ $("input:checkbox:checked").length );
//Mehod 3 - Using class
alert( 'Checked: '+ $(".fruits:checked").size() );
//Mehod 4 - Using class (2)
alert( 'Checked: '+ $(".fruits:checked").length );
//Mehod 5
alert( 'Checked: '+ $("[type='checkbox']:checked").length );
//Mehod 6
alert( 'Checked: '+ $("input:checked").length );
//Mehod 7
alert( 'Checked: '+ $("input[name='fruits[]']:checked").length );
return false;
});
});
</script>
</body>
</html>When you run the above code, tick some checkboxes & click on the button. You should see 7 alerts that will alert the checked checkboxes count. Now you might be wondering of all these different ways, which one would be recommended. I recommend using the following, as per the case:
RECOMMENDATIONS:
1. If you don’t have a class applied to the checkboxes group and you want to make sure that you want to get the count for only a set of specific checkboxes array (assuming that there can be multiple different checkboxes array on the same page), use:
$("input[name='fruits[]']:checked").length;2. If you have a class applied to the checkboxes group then using jQuery count checked checkboxes like so:
$(".fruits:checked").length;I suggest using .length over .size() as it reduces the overhead of a function call. Thus using .length is faster when compared to using .size().
BONUS:
Ok, so far we have seen how to get count of checked checkboxes using jQuery. Now do you know how to get the count of all the checkboxes that are NOT checked using jQuery? Here’s how you can do it, in the above case.
//Get count of checkboxes that were NOT checked - Using named selector
alert( 'Not checked: '+ $("input[name='fruits[]']").not(':checked').length );
//Get count of checkboxes that were NOT checked - Using class
alert( 'Not checked: '+ $(".fruits").not(':checked').length );That’s it for now!
Do you know of any other ways to use jQuery to count checked checkboxes? Feel free to suggest by commenting below.