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/