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.


	Multiple Checkbox Select/Deselect - DEMO


Multiple Checkbox Select/Deselect - DEMO

Cell phone Rating
BlackBerry Bold 9650 2/5
Samsung Galaxy 3.5/5
Droid X 4.5/5
HTC Desire 3/5
Apple iPhone 4 5/5

The jQuery Code

Add following jQuery code in HEAD section of above HTML

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


  • Omkar 9 April, 2013, 17:35

    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 5 September, 2014, 15:51

      Hi, i use this code is working ,but in first time .
      I modify this same code is working very well pls check below 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 3 May, 2015, 16:11



  • Hamid Reza Zarsazan 2 June, 2013, 10:55

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

    Best of Luck

  • Alex Leblois 21 June, 2013, 16:02

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

  • Renato Ferres 25 June, 2013, 0:20

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

    I found some but not clear like this.

  • Eula 23 July, 2013, 9:23

    Thanks for sharing your thoughts on jquery. Regards

  • Erickson VásqUEZ 7 August, 2013, 2:02

    Thanks for the info,

  • gyana Mishra 7 August, 2013, 13:37

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

  • Roldan Unne 7 August, 2013, 16:49

    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 1 November, 2013, 16:48

      Thanks a lot Viral..

    • Andy 2 December, 2013, 14:27

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

  • Tudor 26 August, 2013, 17:37

    Thanks man ! It really helped me !

  • uttam 25 September, 2013, 18:39

    thnx man , keep it up

  • sritej 15 October, 2013, 12:35

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

  • ranadheer 28 October, 2013, 13:07

    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:

  • dusyant rana 18 November, 2013, 13:18

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

  • Shrikant 21 November, 2013, 1:47

    Thanks, this code worked for me.

  • Akash 12 December, 2013, 11:56


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

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

  • raghuveer 7 January, 2014, 19:42

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

    • sudipta 12 March, 2015, 11:10

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

    • sudipta 12 March, 2015, 11:34

      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 27 March, 2015, 10:25

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

  • urdesh kumar 9 January, 2014, 16:13

    thanks brother

  • Amit Lande 21 March, 2014, 11:54

    Jquery for counting selected checkboxes with same classes
    $(function() {
    var c =0;

  • Richard 17 April, 2014, 13:01

    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:

        // 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
            if($(".case").length == $(".case:checked").length) {
                $("#selectall").prop("checked", true);
            } else {
                $("#selectall").prop("checked", false);
  • Ganesh 8 June, 2014, 19:55

    Thanks it helped a lot.

  • soundar raj 24 June, 2014, 13:01

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

  • amit patel 18 July, 2014, 14:45

    very good

  • Semmy 16 February, 2015, 15:29

    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″

  • Shan 4 March, 2015, 11:39

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

  • Jhenna F. 5 May, 2015, 18:47


    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:

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

    Please help me on this. Thanks!

Leave a Reply

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


To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]