How to check all checkboxes in JQuery?

Question

Iam a beginner in jQuery, I know this has been asked before but I dont know whats the proper way to do it for my HTML :

<fieldset>
    <legend>ABC</legend>
    <label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />
    <table>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0">Discs</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_0" value="9;71;72;108;109" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_0" class="xRefButton" />
            </td>
            </tr>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1">Drums</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_1" value="73" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_1" class="xRefButton" />
            </td>
            </tr>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2">Pads</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_2" value="70" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_2" class="xRefButton" />
            </td>
            </tr>

    </table>
</fieldset>

I want this to be clicked :

<label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />

And for all checkboxes under table to be checked or unchecked.

I tried :

// selects all the items in same category
function SelectAll()
{
    $(arguments[0]).siblings('table:eq(0)').find(':checkbox').attr('checked', arguments[0].checked);
}

but it didnt work.

score 3 · Accepted Answer · answered Dec 23 '12 at 19:30

3

You can use

function SelectAll(element)
{
    $(element).closest('fieldset').find('table :checkbox').prop('checked', element.checked);
}

The reason your version did not work is that the table is not a sibling of the select-all checkbox.. it is a sibling of the label that contains the checkbox.

answered Dec 23 '12 at 19:30

Gabriele Petrioli

191,379
34
261
317

Thanks good solution, helped me understand whats going on. Also I read about `input[type=checkbox]` being faster. http://jsperf.com/type-checkbox-vs-checkbox/2 – sprocket12 Dec 23 '12 at 22:55

vitormil · Answer 2 · 2012-12-23T22:18:37.013

2

You have to do something like this:

$('.selectAllButton input').click(function() {
    var checked = $(this).is(':checked');
    var el = $('table input[type=checkbox]');

    if(checked) {
        el.attr('checked', 'checked');
    } else {
        el.removeAttr('checked');
    };
});

http://jsfiddle.net/yM9yf/1/

The code below looks OK, is simpler, works, but it's not exactly what W3C recommend. and I'm not sure if it works in IE6.

$('.selectAllButton input').click(function() {
   var checked = $(this).is(':checked');
   $('table input[type=checkbox]').attr('checked', checked);
});

http://jsfiddle.net/CAYef/

Useful links: 1. W3C Working Draft: input type=checkbox 2. W3C Wiki: checkbox 3. MSDN: checked attribute 4. MDN: input

I hope this can help you.

edited Dec 23 '12 at 22:18

answered Dec 23 '12 at 20:04

vitormil

854
1
6
6

Don't use `attr` for the `checked` *property* – Bergi Dec 23 '12 at 20:36
why not? I edited my answer and now I'm using `removeAttr` to uncheck. – vitormil Dec 23 '12 at 22:24
1

Hi I read the difference between `attr` and `prop` here - http://stackoverflow.com/questions/5874652/prop-vs-attr – sprocket12 Dec 23 '12 at 23:23

How to check all checkboxes in JQuery?

2 Answers2