Welcome to SpellCoder Sign in | Join | Help

Check All checkboxes using JQuery

I am using some jQuery in a project and I needed to make a list of checkboxes to be checked and unchecked on a certain event, similar to what all email clients are doing when you click check all emails, the natural javascript code for this will be a hell with all the loops and checking for element types in the DOM element tree which will seem like a code for controlling a missile in the outer space have a look on the jQuery version of this code
$(document).ready(function(){
    $("#aCheckAll").click(function(){
        $("#myTable").find("input[@type$='checkbox']").each(function(){
                this.checked = true;
            });
    });
});

I had a a table named "myTable" and it has columns with checkboxes in it, and I had a anchor named "aCheckAll" so all what I had to do is hooking the click event to the anchor and inside the event I am searching for all the checkboxes in the table and for each result item I am setting the checked property to true.

Very cool and attractive :)
Published Monday, December 03, 2007 6:02 AM by Mohammed Hossam
Filed Under:

Comments

# re: Check All checkboxes using JQuery

Monday, December 03, 2007 9:04 AM by Pr0fess0rX
very nice and easy code, it helps a lot and saves a lot of time and code lines, it seems that i'll begin to use it as a framework

thnx

# re: Check All checkboxes using JQuery

Monday, December 03, 2007 6:10 PM by Mohamed Ahmed Meligy
Pretty simple example to show people the great power inside :).

A small minor addition also might be replacing "true" with something like:
$("#aCheckAll").checked

Depends on what u want to do with it of course :).

Still they it is keeps it pretty straight forward simple example though :D.

# re: Check All checkboxes using JQuery

Tuesday, December 04, 2007 7:30 AM by Korayem
Welcome to the wonderful world of jQuery!

# re: Check All checkboxes using JQuery

Tuesday, December 04, 2007 8:26 AM by Amir Magdy
nice one

# re: Check All checkboxes using JQuery

Saturday, December 08, 2007 5:35 AM by Mohammed Hossam
@Mohamed Ahmed Meligy
In my case I had two links one for Check All and one for Uncheck All, so the element "aCheckAll" is an anchor not a checkbox

# re: Check All checkboxes using JQuery

Sunday, December 16, 2007 11:56 PM by Aaron Schmidt
Here's a slightly different version that toggles the checkboxes on/off:

$(document).ready(function(){
$('#checkboxToggle').click(function(){
var checkedValue = $('#checkboxToggle').attr('checked') ? 'checked' : '';
$(':checkbox').attr('checked', checkedValue);
});
});

Note that this toggles ALL checkboxes on the page (as opposed to Mohammed's example of everything inside #myTable).

# re: Check All checkboxes using JQuery

Wednesday, December 19, 2007 5:32 PM by Matthew Frey
How about one that uses a seperate checkbox to toggle a group of checkboxes?

I've got a group of checkboxes that toggles some divs on and off. The site in question is http://www.cmchurch.com/v2 . Granted it's still under construction, so don't be too harsh on it...

# re: Check All checkboxes using JQuery

Tuesday, April 01, 2008 10:02 AM by Shirley Barker
I have a checkbox called editResidentMonths and 12 checkboxes (one for each month), all with the name (id) "MONTH".  I want to dynamically (onclick) check the editResidentMonths checkbox if all of the "Month" checkboxes are checked, and dynamically uncheck the same box if some, but not all of the "Month" checkboxes are checked.  I also want to check all of the "Month" checkboxes if the editResidentMonths checkbox is checked.  I am not sure how to modify the above code to do this sort of thing.  Any help?

# re: Check All checkboxes using JQuery

Thursday, April 10, 2008 9:51 PM by Cheonhaeng Jo
//Shirley

$(document).ready(function()
{
$("input[@name=editResidentMonths]").click(function()
{
var checked_status = this.checked;
$("input[@name=month]").each(function()
{
this.checked = checked_status;
});
});
$("input[@name=month]").click(function()
{
var checkedAll = true;
$("input[@name=month]").each(function()
{
if(this.checked == false) {
checkedAll = false;
}
$("input[@name=editResidentMonths]").attr('checked', checkedAll);
});

});
});
Anonymous comments are disabled