当选中一个div中的复选框时，如何取消取消另一个div中的复选框

Question

我有3个div元素，分别是part1，part2和part3

每个div中有多个复选框

如果选中了part1和part2中的复选框，则应该取消选中part3。 （不工作）

如果第3部分中的复选框已选中，则另一个复选框应未选中（正在运行）

第3部分中的复选框不可选中。

的HTML

<form>
<div class="chceckboxt">
<span class="popup"><b>Part 1</b><br></span><br>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<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">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck"> <br></span>
<span class="popup"><span class="popup"> <input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<input type="checkbox" id="myCheck">&nbsp;&nbsp;&nbsp;<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：

$('.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');
    }
});

链接到小提琴

Answer 1

您在处理程序中缺少类名。 另外...您不能有多个具有相同ID的元素，在本例中为复选框。 像这样更改您的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');
    }
});

这是工作的小提琴