Select all checkbox when header checkbox is checked
In many websites we have seen a case where if you select a header checkbox then all the child checkboxes will be get checked defaultly. This comes into picture in some many situations. In your Gmail if you want to delete all mails in your inbox you will check a header checkbox at the top, then all the below checkboxes will be checked by defaultly. In this post, am going to explain how this will work.
First create a header checkbox . and give it's id as "masterCheckbox".
<input type="checkbox" id="masterCheckbox"/>
Step 1: Selecting all the other checkboxes when master checkbox selected
Create all the other child checkboxes.
<input type="checkbox" id="Checkbox1"/>
<input type="checkbox" id="Checkbox2"/>
<input type="checkbox" id="Checkbox3"/>
<input type="checkbox" id="Checkbox4"/>
<input type="checkbox" id="Checkbox5"/>
<input type="checkbox" id="Checkbox6"/>
Then write the following javascript code in your script tag.
<script type="text/javascript">
$('#masterCheckbox').click(function(){
var isChecked = this.checked;
$("input[type='checkbox']").each(function(){
this.checked = isChecked;
})
})
</script>
we are selecting the header checkbox with it's id name as $("#masterCheckbox") and when someone select this checkbox, all the other checkboxes will be get selected.
For that, we are using JQuery's .each() function. this will loop through all the other checkboxes within that page.
Step 2: Selecting specific checkboxes when master checkbox is checked.
You may get issues if you are using other checkboxes for different purposes. In the above case all the other checkboxes in that page will be selected. But, if you want to select only some checkboxes within that page, seperate them by assigning them with a class name.
<input type="checkbox" class="childCheckbox"/>
<input type="checkbox" class="childCheckbox"/>
<input type="checkbox" class="childCheckbox"/>
<input type="checkbox" class="childCheckbox"/>
<input type="checkbox" class="childCheckbox"/>
<input type="checkbox" class="childCheckbox"/>
<input type="checkbox" class="childCheckbox"/>
and now the JQuery code will be...
<script type="text/javascript">
$('#masterCheckbox').click(function(){
var isChecked = this.checked;
$(".childCheckBox").each(function(){
this.checked = isChecked;
})
})
Instead of selecting all the other checkboxes in a page, the above code selects only the checkboxes which are having the class name "childCheckboxes" .
Step 3: Deselecting master checkbox when any of the child checkboxes is unchecked
Now if you deselect any of the child checkbox, the masterCheckbox should be unchecked. for this use below code.
$("input[type='checkbox']:not(:first)").click(function () {
var allChecked = true;
$("input[type='checkbox']:not(:first)").each(function () {
if (this.checked == false) {
allChecked = false;
$('#masterCheckbox').prop('checked', false);
}
})
if (allChecked == true) {
$('#masterCheckbox').prop('checked', true);
}
})
In this way you can select all checkboxes when a header (or master) checkbox is checked..