jQuery Check All Checkboxes Examples (Using Class, ID, Name..)
While working with Forms, you may have come across times when you needed to work with different form elements such as textbox, textareas, radio button, checkboxes, etc. As you know, checkboxes also form an important part of a form. In this article, I am going to share with you a very simple & easy way to check all checkboxes using jQuery when a “Master” checkbox is clicked & uncheck all the checkboxes when this “Master” checkbox is clicked again. In short, this “Master” checkbox acts as a switch for checking the other checkboxes. Also I will share, how to uncheck this “Master” checkbox, should any of the checkboxes be unchecked & check this “Master” checkbox automatically when all the checkboxes are checked. Sounds like a big assignment? Well, let’s find out…
Examples to Check the Checkboxes with Class, ID, Name using jQuery
For the sake of the article, let’s discuss the situation with an example. Let’s assume that we have a web page that consists of a “Master” checkbox with ID “check_all”. There are other checkboxes on the same page. These checkboxes belong to the same group i.e. we want to offer user different ways of subscription signup. So we will make an array of these checkboxes & they will contain values like SMS, Email, Newsletter, etc. So when we check the “check_all” checkboxes, all the subscription checkboxes will be automatically ticked. If the visitor wanted to uncheck all of the checkboxes, all he can simply do it uncheck the “check_all” checkbox & that will uncheck the rest of the checkboxes.
Not only that, but let’s say that the visitor checked all checkboxes using “check_all” checkbox & then unchecks one of the checkboxes, then we we uncheck “check_all” checkbox. If visitor manually checks all checkboxes, then “check_all” checkbox will be automatically checked. This could be a huge time saver for your visitors & ease up the process immensely.
Here is the HTML source code:
<html> <head> <title>Examples to use jQuery to Check All the Checkboxes with the help of Class, ID, Name</title> <script type="text/javascript" src="js/jquery_1.7.1_min.js"></script> </head> <body> <form name="form1" method="post" action=""> <input type="checkbox" name="check_all" id="check_all"> <label for="check_all">Check All</label> <br> <label> <input type="checkbox" name="subscribe[]" class="subscribe" value="Email" id="subscribe_0" /> Email</label> <br /> <label> <input type="checkbox" name="subscribe[]" class="subscribe" value="SMS" id="subscribe_1" /> SMS</label> <br /> <label> <input type="checkbox" name="subscribe[]" class="subscribe" value="Radio" id="subscribe_2" /> Radio</label> <br /> </form> <script type="text/javascript"> </script> </body> </html>
Example 1: Check All Checkboxes array using name of the checkboxes
<script type="text/javascript">
//If the Master checkbox is checked or unchchecked, process the following code
$('#check_all').click(function() {
if( $('#check_all').is(":checked") )
{
$('input[name="subscribe[]"]').each( function() {
$(this).attr("checked",true);
})
}
else
{
$('input[name="subscribe[]"]').each( function() {
$(this).attr("checked",false);
})
}
});
//For each of the subscribe checkboxes, process the following code when they are changed
$('input[name="subscribe[]"]').bind('change', function() {
if ( $('input[name="subscribe[]"]').filter(':not(:checked)').length == 0 )
{
$('#check_all').attr("checked",true);
}
else
{
$('#check_all').attr("checked",false);
}
});
</script>Example 2: Check All Checkboxes array using class of the checkboxes
<script type="text/javascript">
//If the Master checkbox is checked or unchchecked, process the following code
$('#check_all').click(function() {
if( $('#check_all').is(":checked") )
{
$(".subscribe").each( function() {
$(this).attr("checked",true);
})
}
else
{
$(".subscribe").each( function() {
$(this).attr("checked",false);
})
}
});
//For each of the subscribe checkboxes, process the following code when they are changed
$(".subscribe").bind('change', function() {
if ( $('.subscribe').filter(':not(:checked)').length == 0 )
{
$('#check_all').attr("checked",true);
}
else
{
$('#check_all').attr("checked",false);
}
});
</script>In both the above examples, note the usage of [] within the functions used. We are using an array of checkboxes (subscribe[]). So we are using the name of the checkboxes in the code to execute our functions. You may use Example 2 code if you have applied CSS to the checkboxes. If not, you can go ahead with Example 1.
Simple, isn’t it?
Do you know of any other ways to check all checkboxes using jQuery? Feel free to suggest by commenting below.