How to unckeck checkboxes in another div when checkbox in one div is checked

Question

I've 3 div elements namely part1 and part2 and part3

There are multiple checkboxes in each div

If checkboxes in part1 and part2 are checked then part3 should be unchecked. (Not working)

If checkbox in part3 is checked then the other should be unchecked (This is working)

The checkbox in part3 is uncheckable.

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

Link to fiddle

Answer 1

You were missing the class name in your handler. Also... you cannot have mutiple elements with same IDs, in this case checkboxes. Change your JavaScript like this:

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