Javascript 异常复选框是选中的行为

HTML:

说明：

如您所见，我有多个复选框。我的目标是检查是否选中了id为

main\u checkbox+id

的复选框，然后还应选中id为

sub\u checkbox+id

的所有相应复选框。同样，如果未选中主复选框，则应取消选中相应的子复选框。虽然这似乎适用于大多数主复选框和子复选框，但也有一些不符合预期。对于这几个，检查main_复选框是否被选中总是会产生false。我不知道我为什么会有这种行为。我在html中有许多相同格式的复选框。为所有复选框动态生成ID

试试这个：

HTML：

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

<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

使用

id

可以将整个id传递给函数，而不仅仅是数字1,2,3

---

您可以看到一把正在工作的小提琴。

使用

this.getAttribute（'val'）

HTML

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

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

但更好的方法是使用委托和这样的容器

HTML

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

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

---

我错了，我没有正确地输入html。我做了更改，请查看编辑后的html和js.Is

selec_boxt（id）输入错误？当您将
id
传递给函数时，请参阅我的回答谢谢您指出这一点！在你的小提琴中，点击框2不会选中子复选框。事实上，我又错了，这是我在html中的内容。看来我在写问题时需要多加注意。对不起@chridam:javascript调用中有一个输入错误，我纠正了它
<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>

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