[英]Unusual checkbox is checked behavior
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是為所有復選框動態生成的。
通過使用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);
}
}
但是更好的方法是使用委派並擁有這樣的容器
的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);
});
試試這個:
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並將類添加到主復選框,從而糾正了JS。
你可以在這里看到一個工作的小提琴。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.