Jquery: How to check/uncheck a list of checkbox's on checkbox click

Question

I need to uncheck all the Reject checkbox's on clicking Approve checkbox header and vice versa. How can I achieve this using jquery/javascript.

My HTML code is as follows

 <asp:TemplateField >
        <HeaderTemplate>
            Approve
            <br />
            <input id="ChkAllApprovedItems"  type="checkbox"  />
        </HeaderTemplate>
        <ItemTemplate>
            <asp:CheckBox ID="chkApproval" Checked='<%#Eval("IsApproved").ToString()=="1"?true:false %>'  runat="server" onclick="EnableApprove(this,this.checked);" />
         </ItemTemplate>
    </asp:TemplateField>

     <asp:TemplateField >
        <HeaderTemplate>
            Reject
            <br />
            <input id="ChkAllRejectedItems"  type="checkbox"  />
        </HeaderTemplate>
        <ItemTemplate>
            <asp:CheckBox ID="chkReject" Checked='<%#Eval("IsRejected").ToString()=="1"?true:false %>'  runat="server"  onclick="EnableReject(this,this.checked);" />
         </ItemTemplate>
    </asp:TemplateField>

Can someone help me with a sample code.

Thanks.

Answer 1

Here's a pretty simple example:

http://jsfiddle.net/ZcFda/2/

• Get all all the accept and reject checkboxes into two arrays
• Bind "click" events to the two header checkboxes
• When a header is clicked, see if the click has caused it to be "checked"
• If so, cycle through the appropriate checkboxes and set checked = false

Answer 2

You can change other check-box attribute based on main checkbox. JS Fiddle

$("#master_checkbox").change(function(){
    // if checkbox is checked then chek all
    if($(this).attr('checked')) {
        $(".change_me").attr('checked', 'checked');
    }
    // uncheck all
    else {
        $(".change_me").removeAttr('checked');    
    }
});