CODEWITHSUNDEEP
jqueryasp.netcheckbox
Matt
Matt

Reputation: 5680

How to Use jQuery to Select Certain Checkboxes

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.

Upvotes: 0

Views: 145

Answers (4)

Andrew Sauder
Andrew Sauder

Reputation: 74

Check the section's checkboxes by using the html element that defines each section as your delimiter.

For instance:

<div id="section1">
  <input type="checkbox" id="section1controller" />

   <input type="checkbox" id="section1checkbox1" />       
   <input type="checkbox" id="section1checkbox2" />
   <input type="checkbox" id="section1checkbox3" />
</div>

<script>
  $('#section1controller').bind('click', function() {      
    if($(this).is(':checked')) { 
      $('#section1controller').find('input[type="checkbox"]').attr('checked','checked');
    } 
    else {
      $('#section1controller').find('input[type="checkbox"]').removeAttr('checked','checked');
    }
  });
</script>

Upvotes: 1

Simon Arnold
Simon Arnold

Reputation: 16177

The best way would be to add a class on each section, for example section1, section2, etc. Than target all the checkbox in it. For example: 

$('.section1 input:checkbox').checked == true

Upvotes: 1

tkt986
tkt986

Reputation: 1028

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

Upvotes: 1

griegs
griegs

Reputation: 22770

Place each section within a div and div that div a class name, or on each checkbox give them a class name for the section name.

<input type=checkbox class="Section1">

then in jquery

$("input:checkbox:checked.Section1") should be the selector for all items with a class of Section1

or 

input:checkbox:not(:checked).Section1

the above is untested

Upvotes: 1

Related Questions