Question

Consider a simple .aspx page. There are sections in this page and each section has a header with a checkbox control. When selected it selects the other checkboxes that are within that section of the page. Think of it as a ‘Select All in This Section’ option as opposed to ‘Select All on the Page’. I’d like to do this via jQuery but can’t figure out how to keep all of the checkboxes from being selected as opposed to just those within that certain sub-section.

Answer 1

try some thing like this

you can create wrapper div for ur header and sub_header like this

<div class="header">
    <input id="xx" type="checkbox" /> Header #1
    <div class="sub_header">
        <input class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
    </div>
<div>
<div class="header">
    <input type="checkbox" /> Header #2
    <div class="sub_header">
        <input class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
    </div>
<div>

Then check if the header checkbox is selected, then select the sub_header in the next child div element, as follows

$(document).ready(function(){
  $(".header input:checkbox").click(function(){
    if($(this).is(":checked")){
            $(this).parent("div.header").children("div.sub_header").find("input.cc").attr("checked","checked");
}else{
             $(this).parent("div.header").children("div.sub_header").find("input.cc").attr("checked",false);
     }
});

});

I think u can shorten the jquery selector … check this