當選中一個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');
    }
});

這是工作的小提琴