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是为所有复选框动态生成的。

最佳答案

通过使用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

关于javascript - 异常复选框处于选中状态,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25894040/

10-11 23:18
查看更多