Correct "select all" checkbox with jQuery

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?

_{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/

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/

You need to handle the state change of the child checkboxes too. Try this:

<script type="text/javascript"> 
$(function () {
    $('#checkall').click(function () {
        $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
       //THIS IS NEW ADDITION TO YOUR CODE
    $('input[id^="checkbox"]').click(function(){
     if(!this.checked){
        $('#checkall').attr("checked", false)
     }
    });
});
</script> 

Ok, there are similar answers already. I'm gonna post this anyway since I spent some time making it work and learning something new. Doesn't work with v1.6

http://jsfiddle.net/gsndd/

http://jsfiddle.net/gsndd/2/

$(function() {
    // Ripped from https://github.com/mjball/jQuery-CheckAll @Matt Ball 
    var propFn = typeof $.fn.prop === 'function' ? 'prop' : 'attr';

    $('#checkall').click(function() {
        $(this).parents('fieldset:eq(0)').find(':checkbox')[propFn]('checked', this.checked);
    });
    $("input[type=checkbox]:not(#checkall)").click(function() {
        if (!this.checked) {
            $("#checkall")[propFn]('checked', this.checked);
        } else {
            $("#checkall")[propFn]('checked', !$("input[type=checkbox]:not(#checkall)").filter(':not(:checked)').length);
        }

    });
});

EDIT: To make the same work with v1.6+, just change the attr to prop. Ultimately, you are better off using something that works with both.

Edit - Fixed the code to work on any version(assuming John won't come up with v1.7 and say, 'surprise'). Thanks to @Matt Ball