Check Uncheck All Checkbox Using jQuery

On 3/23/2016

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>

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"));

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.

No comments:

Post a Comment

Contact Form


Email *

Message *