[英]How to unckeck checkboxes in another div when checkbox in one div is checked
I've 3 div elements namely part1 and part2 and part3 我有3个div元素,分别是part1,part2和part3
There are multiple checkboxes in each div 每个div中有多个复选框
If checkboxes in part1 and part2 are checked then part3 should be unchecked. 如果选中了part1和part2中的复选框,则应该取消选中part3。 (Not working) (不工作)
If checkbox in part3 is checked then the other should be unchecked (This is working) 如果第3部分中的复选框已选中,则另一个复选框应未选中(正在运行)
The checkbox in part3 is uncheckable. 第3部分中的复选框不可选中。
HTML 的HTML
<form>
<div class="chceckboxt">
<span class="popup"><b>Part 1</b><br></span><br>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
</div>
<br><br>
<div class="chceckboxt">
<span class="popup"><b>Part 2</b><br></span><br>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <input type="checkbox" id="myCheck"> <br></span>
</div>
<br><br>
<span class="popup"><b>Part 3</b><br></span><br>
<div class="noneabove">
<span class="popup">
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck" <br></span>
</span>
</div>
</form>
JS : JS:
$('.noneabove input[type="checkbox"]').on('change',function(){
if(this.checked) {
$('.chceckboxt input[type="checkbox"]').removeAttr('checked');
}
});
$('input[type="checkbox"]').on('change', function() {
if(this.checked) {
$('.noneabove input[type="checkbox"]').removeAttr('checked');
}
});
You were missing the class name in your handler. 您在处理程序中缺少类名。 Also... you cannot have mutiple elements with same IDs, in this case checkboxes. 另外...您不能有多个具有相同ID的元素,在本例中为复选框。 Change your JavaScript like this: 像这样更改您的JavaScript:
$('.noneabove input[type="checkbox"]').on('change',function(){
if(this.checked) {
$('.chceckboxt input[type="checkbox"]').removeAttr('checked');
}
});
$('.chceckboxt input[type="checkbox"]').on('change', function() {
if(this.checked) {
$('.noneabove input[type="checkbox"]').removeAttr('checked');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.