Как снять флажки в другом 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

Вы пропустили имя класса в вашем обработчике.Также ... вы не можете иметь несколько элементов с одинаковыми идентификаторами, в этом случае флажки.Измените свой 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');
    }
});

Вот рабочая скрипка