jQuery checkbox multi select

I have the following code for selecting multiple checkboxes:

$(document).ready(function() {

    /* All groups functionality */
    $(".allGroups").change(function() {
        var checked = this.checked;
        if (checked == true) {
            $(".group").attr("checked", true);
            $(".c").attr("checked", true);
        }
        if (checked == false) {
            $(".group").attr("check开发者_开发技巧ed", false);
            $(".c").attr("checked", false);
        }
    })

    /* Individual Group functionality */
    $(".group").change(function() {
        var checked = this.checked;
        var number = this.value
        var set = '.group-' + number;
        $(set).attr("checked", checked);
    })


} )

I gave 'contacts' the class c and group-#. Groups get the class group. The select all checkbox gets .allGroups

Now how do I achieve that the 'select all' checkbox unchecks itself when not everything is checked anymore?

Got a jsFiddle up here: http://jsfiddle.net/nqHtu/1/

Fiddle: http://jsfiddle.net/nqHtu/4/

I also made several formatting improvements. Things to note:

1. You never need to compare anything to "true" or "false" in an if statement... The result will always be the thing you're comparing! (true == true) -> (true).
2. Instead of attr, use prop. http://api.jquery.com/prop/
3. Rather than repeating code blocks on either end of an if/else statement that's the same and needs a boolean, simply assign the bool result to a variable and pass that along.

Here's the updated JavaScript:

$(document).ready(function() {
    /* All groups functionality */
    var $allGroups = $(".allGroups").change(function() {
        var checked = this.checked;
        $(".group").prop("checked", checked);
        $(".c").prop("checked", checked);
    })

    /* Individual Group functionality */
    $(".group").change(function() {
        var checked = this.checked;
        var number = this.value
        var set = '.group-' + number;
        $(set).prop("checked", checked);
        var allchecked = $(".group:checked").length == $(".group").length;
        $allGroups.prop('checked', allchecked);
    });
});

$(".c").change(function() {
    if(! this.checked) {
        $(".allGroups").attr("checked", false);
    }
});

'select all' checkbox unchecks itself when not everything is checked anymore

This is assuming we're taking into account the contact-group checkboxes being unchecked as well

$(":checkbox").change(function() {
    if ($(":checked").length < $(":checkbox").length) {
        $(".allGroups").prop("checked", false);
    }
});

Here you go : http://jsfiddle.net/AlienWebguy/nqHtu/2/

Simply added this to the .group change event:

if($(".group:checked").length < $(".group").length)
{
       $(".allGroups").prop("checked",false);
}

Also, just a heads up, "checked" is a property now, not an attribute, so you'll want to manipulate it with prop() not attr()