Correct "select all" checkbox with jQuery

Question

http://briancray.com/tests/checkboxes/index.html

The ways to implement select all is simple, but not perfect. The select all and unselect all works fine, but when under select all state, if you uncheck one the select all is also checked. How can this be corrected?

then

"Check all" is still checked. How can this be corrected?

Answer 1

_{Warning, shameless self-promotion ahead.}

I've written a plugin for jQuery that does exactly this sort of thing. Have a look: http://mjball.github.com/jQuery-CheckAll

To use it with the markup on the page you linked:

<form action="#" method="post" id="myform"> 

<fieldset> 
    <div class="radio"><input type="checkbox" name="checkall" id="checkall"> <label for="checkall">Check all</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox3" id="checkbox3"> <label for="checkbox3">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox4" id="checkbox4"> <label for="checkbox4">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox5" id="checkbox5"> <label for="checkbox5">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox6" id="checkbox6"> <label for="checkbox6">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox7" id="checkbox7"> <label for="checkbox7">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox8" id="checkbox8"> <label for="checkbox8">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox9" id="checkbox9"> <label for="checkbox9">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox10" id="checkbox10"> <label for="checkbox10">Checkbox</label></div> 
</fieldset> 

</form> 

This will suffice:

$('#checkall').checkAll('#myform input:checkbox:not(#checkall)');

Demo: http://jsfiddle.net/mattball/npeTz/

CheckAll works correctly with jQuery 1.4.4 and 1.5.2. I have not had time to update it for jQuery 1.6. _sorry.

---

Updated for jQuery 1.6 compatibility: http://jsfiddle.net/mattball/CVQsp/

---

It still works even if you accidentally select the master along with the slaves: http://jsfiddle.net/mattball/BwFvc/

Answer 2

Here's my take on it.

var checkall = $('#checkall');
var boxes = $('input[type="checkbox"]').not(checkall);

checkall.click(function () {
    boxes.attr('checked', this.checked);
});
boxes.change(function() {
    checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length;
});

This way the checkall gets checked even if you manually check all the sub boxes.

http://jsfiddle.net/T4EK2/