jQuery checkbox multi select

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/

Adam Terlson · Accepted Answer · 2011-07-08 22:13:19Z

1

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

I also made several formatting improvements. Things to note:

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).
Instead of attr, use prop. http://api.jquery.com/prop/
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);
    });
});

answered Jul 8, 2011 at 22:13

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SeanCannon Over a year ago

Posted 8 minutes after mine with practically identical code and you get the accept? How'd you manage that? :)

Adam Terlson Over a year ago

I took the time to identify his formatting issues in a pretty numbered list, cut his line count significantly, improved code clarity, had a link that doesn't say "enter link description here", and posted the entire code block. Just guessing.

Jedediah · Accepted Answer · 2011-07-08 22:08:35Z

1

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

answered Jul 8, 2011 at 22:08

Jedediah

1,94417 silver badges33 bronze badges

Comments

kei · Accepted Answer · 2011-07-08 22:13:49Z

1

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

answered Jul 8, 2011 at 22:13

kei

20.5k2 gold badges38 silver badges64 bronze badges

Comments

SeanCannon · Accepted Answer · 2011-07-08 22:45:53Z

1

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()

edited Jul 8, 2011 at 22:45

answered Jul 8, 2011 at 22:05

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Collectives™ on Stack Overflow

jQuery checkbox multi select

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related