Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example

multiple-checkbox-select-jqueryAlmost all the user interfaces that I have created had this functionality of selecting multiple items from a list to process them or delete them. Although its very very easy to implement this functionality in Javascript, using jQuery for this is real fun. I will show you a simple implementation of adding multiple checkbox select and deselect functionality to any webpage. We will have a table with some data in it and checkbox in each row. There will be a select all checkbox in the header of the table. If user select/deselect the selectall checkbox, all the checkbox in table will get selected or deselected accordingly. Now one more thing we would like here to add is, suppose user select all the checkbox one by one then the selectall checkbox should be automatically gets selected. And if user click selectall first and then unchecks any of the checkbox, then the selectall also should be unchecked automatically.

The HTML

<HTML>
<HEAD>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
	<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
	<th><input type="checkbox" id="selectall"/></th>
	<th>Cell phone</th>
	<th>Rating</th>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
	<td>BlackBerry Bold 9650</td>
	<td>2/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
	<td>Samsung Galaxy</td>
	<td>3.5/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
	<td>Droid X</td>
	<td>4.5/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
	<td>HTC Desire</td>
	<td>3/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
	<td>Apple iPhone 4</td>
	<td>5/5</td>
</tr>
</table>

</BODY>
</HTML>

The jQuery Code

Add following jQuery code in HEAD section of above HTML

<SCRIPT language="javascript">
$(function(){

	// add multiple select / deselect functionality
	$("#selectall").click(function () {
		  $('.case').attr('checked', this.checked);
	});

	// if all checkbox are selected, check the selectall checkbox
	// and viceversa
	$(".case").click(function(){

		if($(".case").length == $(".case:checked").length) {
			$("#selectall").attr("checked", "checked");
		} else {
			$("#selectall").removeAttr("checked");
		}

	});
});
</SCRIPT>

Here in above code at line 05, we register a handler on click of selectall checkbox. On click of this checkbox, we check/uncheck all checkbox in the datatable.
Also check the link 13, where we check the selectall checkbox, if all the checkbox are selected manually. To get more idea, play with the below demo.

Online Demo

Click here to view Online Demo

Get our Articles via Email. Enter your email address.

You may also like...

89 Comments

  1. Omkar says:

    I have used this in my project but, i am not able get value of single row of checkbox if there is only single record.
    Its working fine for more than one record.
    unable trace out the problem.

    • shashi kumar says:

      Hi, i use this code is working ,but in first time .
      I modify this same code is working very well pls check below example

      Example

      // add multiple select / deselect functionality
      $(“#selectall”).click(function() {
      $(‘.case’).prop(‘checked’, this.checked);
      });

      // if all checkbox are selected, check the selectall checkbox
      // and viceversa
      $(“.case”).click(function() {

      if ($(“.case”).length == $(“.case:checked”).length) {
      $(“#selectall”).prop(‘checked’, true);
      } else {
      $(“#selectall”).prop(‘checked’, false);
      }

      });

      • Rathod Rajesh says:

        jQuery(‘.checkbox_all’).click(function()
        {
        jQuery(‘.checkbox1’).prop(‘checked’,jQuery(‘.checkbox_all’).prop(‘checked’));
        jQuery(‘.checkbox1’).click(function()
        {
        jQuery(‘.checkbox_all’).removeAttr(‘checked’);
        });

        });

  2. Hamid Reza Zarsazan says:

    Thank you man. I am a programmer form Afghanistan. I have used from your code and it works completely for me.

    Best of Luck

  3. Alex Leblois says:

    This is awesome!! Really helpful for me and developers. Thanks for sharing with us. Following links also helped me to complete my task.

    http://www.mindstick.com/Articles/2f772095-325f-4996-97a6-015f9c00a430/?Select%20All%20CheckBox%20from%20Header%20CheckBox

    http://www.codeproject.com/Articles/23256/Selecting-Deselecting-all-the-CheckBoxes-Inside-a

  4. Renato Ferres says:

    Thank you so much!
    I already had looking for this in many sites.

    I found some but not clear like this.

  5. Eula says:

    Thanks for sharing your thoughts on jquery. Regards

  6. Thanks for the info,

  7. gyana Mishra says:

    Thanks dude..So nice, this one solved my prob..

  8. Roldan Unne says:

    Hi… this sample is really great…
    you can also consider my code below base on your tutorial.. hope its also help..
    —————————————————————————————

        $("#selectall").click(function () {
    	var checkAll = $("#selectall").prop('checked');
    	    if (checkAll) {
                $(".case").prop("checked", true);
            } else {
                $(".case").prop("checked", false);
            }
        });
    

    —————————————————————————————

    • Muguradoss Thiruvananthapuram says:

      Thanks a lot Viral..

    • Andy says:

      Thanks guys for the nice code. This is a nice improvement, .prop() works better for me when toggling the check box selection.

  9. Tudor says:

    Thanks man ! It really helped me !

  10. uttam says:

    thnx man , keep it up

  11. sritej says:

    In my project jquery is not working could you please update same thing using javascript.

  12. ranadheer says:

    Hi. nice. But there is one more case, when any one of the child checkbox hets unchecked then master checkbox should be unchecked right ? for this i have written a post. please look at the code in this post: http://coding-issues.blogspot.in/2013/10/check-uncheck-all-checkboxes-jquery.html

  13. dusyant rana says:

    it works only single time, we need refresh page each time,

  14. Shrikant says:

    Thanks, this code worked for me.

  15. Akash says:

    500
    6000
    6540

    $(function(){
     
        // add multiple select / deselect functionality
        $("#selectall").click(function () {
              $('.case').attr('checked', this.checked);
        });
     
        // if all checkbox are selected, check the selectall checkbox
        // and viceversa
        $(".case").click(function(){
     
            if($(".case").length == $(".case:checked").length) {
                $("#selectall").attr("checked", "checked");
            } else {
                $("#selectall").removeAttr("checked");
            }
     
        });
    });
    
  16. N Srinivas says:

    Hi!
    This co
    Thanks you.This code is used in my project.its perfectly working.Good job

  17. raghuveer says:

    This will not work with the jquery 1.10.2 version.
    Check the below link for solution

    http://stackoverflow.com/questions/5874652/prop-vs-attr

    • sudipta says:

      i’m also having same problem.do i have to change the jquery code for js 1.10.2.kindly give me some advise

    • sudipta says:

      raghuveer: this solution completely works with js 1.4.2.min.js but why it can’t work with 1.10.2 js?i read your provided link but didn’t understand the sollution.can you give a simple sollution to this?waiting for your reply

      • Sagar says:

        i am also having same problem….which jquery plugin i have to use

  18. urdesh kumar says:

    thanks brother

  19. Amit Lande says:

    Jquery for counting selected checkboxes with same classes
    $(function() {
    $(“.case”).click(function(){
    var c =0;
    $(“.case:checked”).each(function(){
    c++;
    });
    $(“#totParts”).val(c);;
    });
    });

  20. Richard says:

    Very frustrating script when its being adapted, but one tip – that script will not work as is with jquery 2.0.3, you have to use prop, else it’ll just work once and then quit. this I what I ended up with:

    $(function(){
        // add multiple select / deselect functionality
    	$("#selectall").click(function () {
    		var checkAll = $("#selectall").prop('checked');
    		if (checkAll) {
    			$(".case").prop("checked", true);
    		} else {
    			$(".case").prop("checked", false);
    		}
    	});
      
        // if all checkbox are selected, check the selectall checkbox and vice versa
        $(".case").click(function(){
            if($(".case").length == $(".case:checked").length) {
                $("#selectall").prop("checked", true);
            } else {
                $("#selectall").prop("checked", false);
            }
        });
    });
    
  21. Ganesh says:

    Thanks it helped a lot.

  22. soundar raj says:

    ya thanks /// its working !!!!!!!!!!!!!!!!

  23. amit patel says:

    very good
    thanks

  24. Semmy says:

    I have multiple checkboxes with same id “RoleType_1” now on click function how can i disable all the checkboxes with that id “RoleType_1”

  25. Shan says:

    Great..!!! Its working well. Thank you very much bro…

  26. Jhenna F. says:

    Hi,

    Thanks to your code. Just want to ask how to make it work if I can only work on input name and type. Because, I cannot make edits to the form code as it is system generated.

    My code:
    $(function(){$(“input[name=AllCommunication]”).click(function(){$(“input[type=checkbox]”).attr(‘checked’,this.checked);});$(“input[type=checkbox]”).click(function(){if($(“input[type=checkbox]”).length==$(“input[type=checkbox:checked]”).length){$(“input[name=AllCommunication]”).attr(“checked”,”checked”);}else{$(“input[name=AllCommunication]”).removeAttr(“checked”);}});});

    Needs Help On This: When we deselect one of the checkboxes, the Select All checkbox should be uncheck.

    Please help me on this. Thanks!

  27. Gianender Bhardwaj says:

    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *