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

链接到fiddle

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

Here is the working fiddle

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

1 个答案: