Question

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("checked", 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/

Answer 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);
    });
});