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



77 Comments

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

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

    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

  • 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: http://coding-issues.blogspot.in/2013/10/check-uncheck-all-checkboxes-jquery.html

  • 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

    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");
            }
     
        });
    });
    
  • N Srinivas 24 December, 2013, 3:26

    Hi!
    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

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

  • 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() {
    $(“.case”).click(function(){
    var c =0;
    $(“.case:checked”).each(function(){
    c++;
    });
    $(“#totParts”).val(c);;
    });
    });

  • 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:

    $(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);
            }
        });
    });
    

Leave a Reply

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

Note

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]