Question

考虑一个简单的.aspx页面。此页面中有部分，每个部分都有一个带有复选框控件的标题。选中后，它会选择页面该部分内的其他复选框。可以将其视为“在此部分中选择全部”选项，而不是“在页面上选择全部”。我想通过jQuery做到这一点，但无法弄清楚如何保持所有复选框的选择，而不是那个特定子部分中的复选框。

Answer 1

将每个部分放在div和div中，使用div作为类名，或者在每个复选框上为它们指定部分名称的类名。

<input type=checkbox class="Section1">

然后在jquery

$("input:checkbox:checked.Section1")应该是所有具有Section1

类的项目的选择器

或

input:checkbox:not(:checked).Section1

以上是未经测试的

Answer 2

最好的方法是在每个部分添加一个类，例如section1，section2等。比目标中的所有复选框。例如：

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

Answer 3

尝试这样的事情

你可以为你的头文件和sub_header创建包装div，就像这样

<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>

然后检查是否选中了标题复选框，然后在下一个子div元素中选择sub_header，如下所示

$(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);
     }
});

}）;

我想你可以缩短jquery选择器...... check this

Answer 4

使用html元素检查该部分的复选框，该元素将每个部分定义为分隔符。

例如：

<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>

如何使用jQuery选择某些复选框

4 个答案: