Check Uncheck All Checkbox Using jQuery

Hi! In this post let us see how to check uncheck all checkbox using jquery script. If your application contains several checkboxes for the users to select/check, then it is good to provide a single checkbox which allows users to select all checkbox at once. Implementing this feature in any application is fairly simple, but it improves overall user experience - which matters the most. Here we'll see how to do it in jquery.

How to Check Uncheck All Checkbox using jQuery

First let us create a checkbox group that lists various countries. All these checkboxes in the group will share a common name "country" with different id's. Plus we must have another checkbox which upon selecting/checking will select/check all the checkboxes in the group.

HTML Markup

Here is the html markup for creating the checkboxes.

<div><input type="checkbox" name="checkall" id="checkall" />Select All</div>
<div id="countrylist" style="border-top: 1px solid grey; padding-top: 10px;">
    <div><input type="checkbox" name="country" id="country1" value="United States" />India</div>
    <div><input type="checkbox" name="country" id="country2" value="USA" />USA</div>
    <div><input type="checkbox" name="country" id="country3" value="UK" />UK</div>
    <div><input type="checkbox" name="country" id="country4" value="France" />France</div>
    <div><input type="checkbox" name="country" id="country5" value="Germany" />Germany</div>
</div>

jQuery Script

And here is the jquery script that selects/deselects all the checkbox based upon the value of the #checkall checkbox.

<script type="text/javascript">
$("#checkall").change(function () {
    $('input[name="country"]').prop('checked', $(this).prop("checked"));
});
</script>

The above script will be triggered whenever the #checkall checkbox value is changed (either checked or unchecked) and all the checkboxes with the name "country" will be checked or unchecked accordingly.

Check/Uncheck All Checkbox using jQuery

If you want to select/deselect all the checkboxes in the html form irrespective of their names then use this script,

$("#checkall").change(function () {
    $('input:checkbox').prop('checked', $(this).prop("checked"));
});

Here the changes will be applied to all the input controls of type "checkbox".

Note: Make sure to include jquery library for this script to work :D

That was all about checking unchecking all checkbox using jquery library.

Tweet