javascript - 不寻常的复选框被选中的行为

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

描述:

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

Answer 1

使用 this.getAttribute('val') 获取属性 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

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

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