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.

Let’s check the code.

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...

95 Comments

  1. pecciola says:

    Great!
    One question : Which service you made the initial image of the post?
    Thanks

  2. shankha says:

    hi
    how can u get the values of the items you just ticked?

  3. @shanka, since the check boxes all have the name case, they should be accessible in an array $case[] on the processing page. then you an use the foreach array loop to run through them.

    i.e

  4. JavaGenious says:

    Is doing it using JAVASCRIPT more easier?

  5. Ram says:

    It is really amazing.

  6. Bulbul says:

    Thanks,Thanks a lot.How you became a master in coding?

  7. Kyathi says:

    Wonderful article. Thanks

  8. kanishka says:

    Its amazing and much easier.

  9. divya says:

    Thank you so much for sharing this.

  10. vishwajeet says:

    how u will transfer selected value on php page

  11. Mahesh says:

    thanx for help

  12. aryan shukla says:

    very helpful artical…

  13. Paulinho Cé says:

    Perfeito, parabéns e muito obrigado.

    • saw says:

      Argentina o mais grande do mundo!!

  14. Mary McGeary says:

    Nice work and thanks for sharing! I wonder whether this is possible :- say the ‘cellphone’ list is only one of many on the page – you might want several of these lists, each in a different category. Is there a way that we could build in a way for the user to collapse/expand categories. Eg., they viewed the cellphone list and would like now to close it (as it takes up real estate), and open another category with its own list and checkboxes. Any help with this would be much appreciated!

  15. kirti says:

    i want to delete the particular row on select of checkbox of that row also if all checkboxes are selected all rows should get deleted. this all should happen on the click of down delete button.

  16. kemal says:
    $(function () {
                var checkboxes = $('#form-fields li').find('.check');
                $('#checkall').bind('click', function () {
    
                    if (this.checked) {
                        checkboxes.attr('checked', 'true');
                    }
                    else {
                        checkboxes.removeAttr('checked');
                    }
                });
                $('.check').click(function () {
                    var checked = $('#form-fields li').find('.check:checked');
                    if (checkboxes.length == checked.length) {
                        $('#checkall').attr('checked', 'true');
                    }
                    else {
                        $('#checkall').removeAttr('checked');
                    }
                });
            });
    

    html file is

    Check All

    Checkbox 1

    Checkbox 2

    Checkbox 3

    Checkbox 4

    Checkbox 5

  17. Nade says:

    The Demo For JSP .. help out.. !

  18. sud says:

    it’s good dud…………………………!

  19. shiva says:

    Hi all, Can any one please help me to use multi select list box in struts2 tag of Jsp file

  20. Poonam Shukl says:

    Hi Frds,
    Its really amazing.Thanks a lot for help me to finding my solution.

  21. Anil Suhagiya says:

    This Is Very Useful i am php programmer and i used this logic of you rather than plugins

  22. Fana says:

    Nice Sharing Thank you Very much, i want this script thank you….

    Fana.

  23. Mike says:

    Very Useful Post. Gr8 work. Very Nice :)

  24. Jonjon says:

    OMG… i’m search this kind of function… for 2 hours.. this is the exactly that i’ve looking for.. thanks Developer for sharing this code.. HURRAY!!!

  25. Frank says:

    Great successive code brother.
    thank you !!!
    :) Cheers :)

  26. bhargav says:

    Really helpful article….

    Thanks brother..

  27. Paulraj says:

    Thanks… Nice job..

  28. Ali Hasnain says:

    Thanks man..you did the great job…

  29. yogendra singh says:

    this is really amazing. This helps me a lot……. Thanks a lot.

  30. Pulak says:

    can you tell me how do I proceed for deleting this value from database and from table too.
    If you have example for it share the link

  31. Robin says:

    Thank you budy for the nice tutorial.. you made my day ….. thanks once more..

  32. 1Malaysia says:

    this is fantastic script!!.. you light my world!..

    the vice-versa snippet is the champs! :)

  33. This is exactly what I have looking… marvelous

    Great Job…

    Thank You…

  34. Your code do not work perfectly.
    please modify this code.

  35. Preeti says:

    Thanks a ton!!
    Great coding!!

  36. venkat says:

    hi i have issue. iam looping check boxes with id “#membership_role_ids_” whith you are same logic. iam able to select only first check box. what is issue. please tell me ..

  37. Good job mate

    Tricky :)

  38. waqas says:

    Good work . thanks for this code.

  39. Nickhil for you says:

    Hi,
    Thanks for this great code, saved much of my time ;)

    Regards,
    Nickhil4u

  40. rohit says:

    Its not working on firefox 17.0

  41. Rajkumar says:

    Wow exactly working great and what i am searching for..thanks…

  42. A T says:

    FANTASTIC!!!!

  43. neeraj says:

    Excellent !!! Job

  44. andy says:

    Really helpful

  45. andy says:

    nice

    • hardik says:

      u rocked

  46. Praveen says:

    Dude thanks for the code. It is working for Struts2 also.
    Thanks a lot.

  47. Nilachal says:

    Liked .. very good thinking…

  48. Hi,
    nice work dude, but explain the code too.

  49. faheem says:

    Great help.
    But when i dynamic this code,first iteration code working is fine.In second code not work.Any idea.
    I used another method to tick for a check box.
    replace line $(“#selectall”).trigger(“click”); instead of $(“#selectall”).attr(“checked”, true);
    Thanks

  50. David says:

    superb

  51. 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’);
        });

        });

  52. 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

  53. 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

  54. Renato Ferres says:

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

    I found some but not clear like this.

  55. Eula says:

    Thanks for sharing your thoughts on jquery. Regards

  56. Thanks for the info,

  57. gyana Mishra says:

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

  58. 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.

    • tadada says:

      @Roldan Unne yours code worked for me

  59. Tudor says:

    Thanks man ! It really helped me !

  60. uttam says:

    thnx man , keep it up

  61. sritej says:

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

  62. 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

  63. dusyant rana says:

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

    • DDOS says:

      Use .prop instead of .attr
      that should fix it!

  64. Shrikant says:

    Thanks, this code worked for me.

  65. 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");
            }
     
        });
    });
    
  66. N Srinivas says:

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

  67. 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

  68. urdesh kumar says:

    thanks brother

  69. 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);;
    });
    });

  70. 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:

  71. Ganesh says:

    Thanks it helped a lot.

  72. soundar raj says:

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

  73. amit patel says:

    very good
    thanks

  74. 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”

  75. Shan says:

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

  76. 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!

  77. Gianender Bhardwaj says:

    Thanks.

  78. Derik Waz says:

    Is there any way for this code to take in a variable?
    So rather than having for strictly case, it will take in what ever x is.

  79. renuka says:

    ‘thead> th.multiSelect:first’

  80. renuka says:

    pls give any other suggestions for this query

  81. Mo says:

    Reiterating what “Richard” posted here already,

    Using Prop instead of attr works, dont ask me why and how, new version of jQuery library seems to NOT like it.

    Happy coding:

    // 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 viceversa
    $(“.case”).click(function(){
    if($(“.case”).length == $(“.case:checked”).length) {
    $(“#selectAll”).prop(“checked”, “checked”);
    } else {
    $(“#selectAll”).prop(“checked”);
    }
    });

Leave a Reply

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