Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example

pecciola says:

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

shankha says:

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

ken simiyu mse says:

@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

JavaGenious says:

Is doing it using JAVASCRIPT more easier?

Ram says:

It is really amazing.

Bulbul says:

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

Kyathi says:

Wonderful article. Thanks

kanishka says:

Its amazing and much easier.

divya says:

Thank you so much for sharing this.

vishwajeet says:

how u will transfer selected value on php page

Mahesh says:

thanx for help

aryan shukla says:

very helpful artical…

Paulinho Cé says:

Perfeito, parabéns e muito obrigado.

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!

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.

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

Nade says:

The Demo For JSP .. help out.. !

sud says:

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

shiva says:

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

Poonam Shukl says:

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

Anil Suhagiya says:

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

Fana says:

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

Fana.

Mike says:

Very Useful Post. Gr8 work. Very Nice :)

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

Frank says:

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

bhargav says:

Really helpful article….

Thanks brother..

Paulraj says:

Thanks… Nice job..

Ali Hasnain says:

Thanks man..you did the great job…

yogendra singh says:

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

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

Robin says:

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

1Malaysia says:

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

the vice-versa snippet is the champs! :)

Anbarasan k (@kanbarasan) says:

This is exactly what I have looking… marvelous

Great Job…

Thank You…

Khurshid alam says:

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

Preeti says:

Thanks a ton!!
Great coding!!

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

Muhammed Athimannil says:

Good job mate

Tricky :)

waqas says:

Good work . thanks for this code.

Nickhil for you says:

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

Regards,
Nickhil4u

rohit says:

Its not working on firefox 17.0

Rajkumar says:

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

A T says:

FANTASTIC!!!!

neeraj says:

Excellent !!! Job

andy says:

Really helpful

andy says:

nice

Praveen says:

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

Nilachal says:

Liked .. very good thinking…

Sachithanandham says:

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

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

David says:

superb

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.

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

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

Renato Ferres says:

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

I found some but not clear like this.

Eula says:

Thanks for sharing your thoughts on jquery. Regards

Erickson VásqUEZ says:

Thanks for the info,

gyana Mishra says:

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

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

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

Tudor says:

Thanks man ! It really helped me !

uttam says:

thnx man , keep it up

sritej says:

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

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

dusyant rana says:

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

Shrikant says:

Thanks, this code worked for me.

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");
        }
 
    });
});

N Srinivas says:

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

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

urdesh kumar says:

thanks brother

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

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

Ganesh says:

Thanks it helped a lot.

soundar raj says:

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

amit patel says:

very good
thanks

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”

Shan says:

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

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!

Gianender Bhardwaj says:

Thanks.

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.

renuka says:

‘thead> th.multiSelect:first’

renuka says:

pls give any other suggestions for this query

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”);
}
});

bhupendra says:

Use this change $j to $ …. i use because Jquery conflict

$j(function () {

// add multiple select / deselect functionality
$j(“#selectall”).click(function () {
if (this.checked == true) {
$j(‘.case’).attr(‘checked’, “checked”);
$j(‘.case’).prop(“checked”, true);
}
else {
$j(‘.case’).removeAttr(“checked”);
$j(‘.case’).prop(“checked”, false);
}
});

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

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

});
});

Sir Montes says:

My solution, tested with jquery-3.3.1.

$(function () {
// add multiple select / deselect functionality
$(“#selectall”).change(function () {
$(“.case”).prop(“checked”, this.checked);
});
// if all checkboxes are selected, check the selectall checkbox otherwise uncheck
$(“.case”).click(function () {
if ($(“.case”).length === $(“.case:checked”).length) {
$(“#selectall”).prop(“checked”, true);
} else {
$(“#selectall”).prop(“checked”, false);
}
});
});