Select all checkboxes using Javascript or jQuery

Question

I want to check/uncheck all check boxes of a particular row in a table if Select all Checkbox is selected for that particular row

Here is the html for a single row.

<tr>
    <td class="left">
        <label>Admin - Organization</label>
    </td>

    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="selectallAO" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxViewAOrganization" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxAddAOrganization" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxEditAOrganization" runat="server" /></label>
        </div>
    </td>
    <td>
        <div class="checkbox">
        <label><asp:CheckBox cssclass="checkboxAO" ID="chkbxDeleteAOrganization" runat="server" /></label>
        </div>
    </td>                                
</tr>

There are 5 other rows like this for other pages as well. So, I want to check/uncheck all checkbox's for a particular row for which Select All was checked/unchecked.

Answer 1

UPDATE

Updated the jQuery function to make the master checkbox override child checkbox states.

---

How does something like this sound? I wasn't sure which classes were your checkboxes so you'll have to tweak this a bit:

HTML:

<div class="spacer"><input type="checkbox" class="selectallAO"> Select All</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>

CSS:

div.spacer {
    display: block;
}

JS:

$('.selectallAO').click(function() {
    this.checked ? $('.checkboxAO').prop('checked', true) : $('.checkboxAO').prop('checked', false);
});

jsFiddle