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.
2
-
Shameless self-promotion: check out a jQuery plugin I wrote to handle this sort of interaction. It has nothing to do with ASP.NET, but should suffice as long as you don't need server-side code. github.com/mjball/jQuery-CheckAllMatt Ball– Matt Ball2011-08-24 02:28:56 +00:00Commented Aug 24, 2011 at 2:28
-
It may help to at least post some sample HTML.Andrew Whitaker– Andrew Whitaker2011-08-24 02:33:38 +00:00Commented Aug 24, 2011 at 2:33
Add a comment
|
4 Answers
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
Comments
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
Comments
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
Comments
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>
