I have 6 checkboxes, one for each business day and one that says 'all'.

What i want to be able to do is uncheck all the other boxes if someone clicks the 'all' checkbox if that makes sense.

For example, if someone has clicked monday and wednesday ... then they e in and click the 'all' checkbox, then the monday and wednesday checkbox should uncheck.

Cheers,

I have 6 checkboxes, one for each business day and one that says 'all'.

What i want to be able to do is uncheck all the other boxes if someone clicks the 'all' checkbox if that makes sense.

For example, if someone has clicked monday and wednesday ... then they e in and click the 'all' checkbox, then the monday and wednesday checkbox should uncheck.

Cheers,

• php
• javascript
• jquery

Share Follow asked Dec 15, 2010 at 3:50 ChrisChris 1,12944 gold badges1717 silver badges2323 bronze badges 3

• Normally a user would check all when he wants to check all the checkboxes. Is this you want? – rahul Commented Dec 15, 2010 at 3:53
• I would do it that way .... but the people im doing it for want it the other way around, when the user clicks all, all the rest of the checkboxes uncheck except the all one. – Chris Commented Dec 15, 2010 at 3:55
• And which part are you having trouble with? Or should we just Give You Teh Codez? – Brad Mace Commented Dec 15, 2010 at 3:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This is not you want, but seems to be more sensible.

HTML

<input type="checkbox" id="chkAll" />
<br />
<input type="checkbox" id="chkMonday" class="child" />
<input type="checkbox" id="chkTuesday" class="child" />
<input type="checkbox" id="chkWednesday" class="child" />
<input type="checkbox" id="chkThursday" class="child" />
<input type="checkbox" id="chkFriday" class="child" />
<input type="checkbox" id="chkSaturday" class="child" />
<input type="checkbox" id="chkSunday" class="child" />

jQUery

$(function(){
    $("#chkAll").change(function(){
        if (this.checked) {
            $("input:checkbox.child").attr("checked", "checked");
        }
        else {
            $("input:checkbox.child").removeAttr("checked");
        }
    });
});

See a working demo

See an updated version which handles change in the child checkboxes also.

jquery and some code like this should do it.

$('#all-id').change(function(){
   if($('#all-id').is(':checked')){
     if($('#monday-id').is(':checked')){
        $('#monday-id').attr('checked', false);
     } else {
       $('#monday-id').attr('checked', true);
     }
     // etc
   }
});

After you might want to put all the ids in an array and setup a loop or play with the structure of your document to be able to easily loop on all of those checkboxes