Select all checkboxes with one check with jQuery

Question

I need to check one checkbox (checkAll) and select all and if I deselect it all should be deselected too. Additionally, if they are all selected and then I uncheck 'a', 'b' or 'c', 'checkAll' also need to be unchecked.

<input type="checkbox" value="" id="checkAll">
<input type="checkbox" value="a">
<input type="checkbox" value="b">
<input type="checkbox" value="c">

What's the trigger I need to use? Tried but failed:

$("#checkAll").click(function() {
    alert('test');
});

Håvard · Accepted Answer · 2011-04-01 21:43:58Z

2

Use the change event. When the #checkAll box is changed, change the other boxes correspondingly.

To change the #checkAll box when according to the others, you could do something like this:

$(":checkbox").not("#checkAll").change(function()
{
    $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true);
});

Basically this will execute when a checkbox other than #checkAll changes, and change #checkAll depending on whether or not there are unchecked boxes.

edited Apr 1, 2011 at 21:43

answered Apr 1, 2011 at 21:31

Håvard

10.1k1 gold badge43 silver badges46 bronze badges

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

Comments

Benjamin Crouzier · Accepted Answer · 2011-04-01 22:08:40Z

2

Simple script that does what you want:

HTML:

<div>
    <input type="checkbox" value="" id="checkAll">
    <input type="checkbox" value="a" class="others">
    <input type="checkbox" value="b" class="others">
    <input type="checkbox" value="c" class="others">
</div>

javascript:

<script type="text/javascript">
    $("#checkAll").change(function() {
        $(":checkbox").attr("checked", this.checked);
    });
    $(".others").change(function() {
        if (!$('input.others[type=checkbox]:not(:checked)').length)
            $("#checkAll").attr('checked', true);
        if (!$('input.others[type=checkbox]:checked').length)
            $("#checkAll").attr('checked', false);
    });
</script>

edited Apr 1, 2011 at 22:08

answered Apr 1, 2011 at 21:58

Benjamin Crouzier

42.2k48 gold badges179 silver badges240 bronze badges

2 Comments

santa Over a year ago

This works to check and uncheck all checkboxes if I click "checkAll". However, if all are checked and I uncheck of of the "others" it should also uncheck "checkAll". Also if "checkAll" is not selected and I mannually select all "others" it should select "checkAll". Sorry, it sounds convoluted a bit.

Benjamin Crouzier Over a year ago

This works fine for me. What brower and jquery version are you using? Do you use the script multiple times? (in this case, it doesn't work, but i can rearange it to work.)

Babak Naffas · Accepted Answer · 2011-04-01 21:38:14Z

0

I didn't change any of your code and it works for me: http://jsfiddle.net/9U2aQ/

Make sure that you're referencing your jquery file correctly.

answered Apr 1, 2011 at 21:38

Babak Naffas

12.6k3 gold badges36 silver badges51 bronze badges

2 Comments

Phrogz Over a year ago

This 'answer' does not address @santa's needs at all. I'd downvote if I had votes left today.

Babak Naffas Over a year ago

@santa's need is to understand why his/her code isn't working. I have verified that the code works and provided a recommendation as to why it's not working in his/her environment.

Porco · Accepted Answer · 2011-04-01 21:55:53Z

0

This should work:

    $(':checkbox').not('#checkAll').change(function()
    {
        $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true);
    }); 
    $("#checkAll").change(function() 
    {
        $(':checkbox').attr('checked', this.checked);
    });

edited Apr 1, 2011 at 21:55

answered Apr 1, 2011 at 21:50

Porco

4,2033 gold badges25 silver badges25 bronze badges

Collectives™ on Stack Overflow

Select all checkboxes with one check with jQuery

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related