Question

HTML：

<input type="checkbox" id="1" val="1" onclick="select_box(id);" name="main_vals[]">Box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" id="2" val="2" onclick="selec_boxt(id);" name="main_vals[]">Box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" id="3" val="3" onclick="select_box(id);" name="main_vals[]">Box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3

使用Javascript：

select_box = function(id) {
    if($('#main_checkbox_'+id).is(:checked)) {
        $('.sub_checkbox_'+id).each(function() {
           this.checked = true;
       });
    } else {
        $('.sub_checkbox_'+id).each(function() {
          this.checked = false;
      });
    }
}

说明

如您所见，我有多个复选框。我的目标是检查是否选中了标识为main_checkbox_+id的复选框，然后还应检查标识为sub_checkbox_+id的所有相应复选框。同样，如果未选中主复选框，则应取消选中相应的子复选框。虽然这似乎适用于大多数主要和子复选框，但有一些不能按预期工作。有了这几个，检查main_checkbox是否被检查的检查总是产生错误。我不确定为什么我会遇到这种行为。我在html中有更多复选框，格式相同。为所有复选框动态生成ID。

Answer 1

使用val

获取属性this.getAttribute('val')

<强> HTML

<input type="checkbox" id="main_checkbox_1" val="1" onclick="select_box(this.getAttribute('val'));" name="main_vals[]">Box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" id="main_checkbox_2" val="2" onclick="select_box(this.getAttribute('val'));" name="main_vals[]">

<强>的jQuery

select_box = function(id) {
       if($('#main_checkbox_'+id).is(':checked')) {
              $('.sub_checkbox_'+id).prop('checked',true);
        } else {
               $('.sub_checkbox_'+id).prop('checked',false);
        }
}

DEMO

但更好的方法是使用委托并拥有像这样的容器

<强> HTML

<div class="container">
    <input type="checkbox" class="main_checkbox" val="1" name="main_vals[]">Box 1
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1
</div>
<div class="container">
    <input type="checkbox" class="main_checkbox" val="2" name="main_vals[]">Box 2
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2
</div>
<div class="container">
    <input type="checkbox" class="main_checkbox" val="3" name="main_vals[]">Box 3
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3
</div>

<强>的jQuery

$('.main_checkbox').on('change',function(){
    $(this).siblings('.sub_checkbox').prop('checked',this.checked);
});

DEMO

Answer 2

试试这个：

<强> HTML ：

<input type="checkbox" id="1" class="main_checkbox_1" val="1" onclick="select_box(id);" name="main_vals[]">Box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" id="2" val="2" class="main_checkbox_2" onclick="select_box(id);" name="main_vals[]">Box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" id="3" val="3" class="main_checkbox_3" onclick="select_box(id);" name="main_vals[]">Box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3

<强> JS ：

select_box = function(id) {
    console.log(id);
       if($('.main_checkbox_'+id).is(":checked")) {
              $('.sub_checkbox_'+id).each(function() {
                     this.checked = true;
               });
        } else {
               $('.sub_checkbox_'+id).each(function() {
                      this.checked = false;
                });
        }
}

使用id将整个ID传递给函数，而不仅仅是数字1,2,3 ..所以我更改了ID并将类添加到main复选框，从而按顺序更正了JS。 / p>

你可以看到一个工作小提琴here。

不正常的复选框是检查行为

2 个答案: