Check/ Uncheck all checkbox with JQuery

by  
Share:
Check Uncheck all checkbox with Jquery

Gmail is the most basic thing we all use everyday. When I was in my high school I always fancied how their checkboxes worked, Not until I started learning HTML, Jquery and Javascript I came to know its very easy to implement it. So in this tutorial I will be explaining you how to Check/Uncheck all checkbox with Jquery.

View Demo

What will this script do?

Well as the post title says it will do the exact same thing. User can check/uncheck all checkbox by clicking on just one checkbox. I have used Jquery library to do the effect. Also note that this script will only work with jquery 1.7.2 library and above.

Adding the check/uncheck effect with Jquery

Just follow this 4 simple steps and you will be amazed how quickly it’s done:

1. Add a checkbox that will be the main checkbox to be used for check/uncheck effect. Add class chk_all to it.

<input type="checkbox" name="chk_all" class="chk_all">

2. Add as many sub checkboxes you want. They are the one on whom the effect will be applied. Add class checkboxes to it.
<input type="checkbox" name="country_id" class="checkboxes" value="1" >
<input type="checkbox" name="country_id" class="checkboxes" value="2" >
<input type="checkbox" name="country_id" class="checkboxes" value="3" >
<input type="checkbox" name="country_id" class="checkboxes" value="4" >
<input type="checkbox" name="country_id" class="checkboxes" value="5" >

3. Add jquery library to your html. if you add external jquery library make sure it’s above 1.7.2
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>

4. Now add the heart of the code, the code that does the trick. Bind the main checkbox with the onClick event to check/uncheck all checkbox depending upon their state, Similarly bind the sub checkboxes with the onClick event too to check/uncheck the main checkbox depending upon the values of the sub checkboxes.
<script type="text/javascript">
$(document).ready(function () { 

	// binding the check all box to onClick event
    $(".chk_all").click(function () {

		var checkAll = $(".chk_all").prop('checked');
		if (checkAll) {
			$(".checkboxes").prop("checked", true);
		} else {
			$(".checkboxes").prop("checked", false);
		}	

    });

    // if all checkboxes are selected, then checked the main checkbox class and vise versa
    $(".checkboxes").click(function(){

        if($(".checkboxes").length == $(".subscheked:checked").length) {
            $(".chk_all").attr("checked", "checked");
        } else {
            $(".chk_all").removeAttr("checked");
        }

    });

});
</script>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Parshv Shah on

i loved it!!!

Reply
shivasurya on

nice post bro!

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.