I have 3 divs, every div contains 2 checkboxes, and when I check any of the checkboxes in the same div no problem, but when I check the checkboxes in different div the other checkboxes are unchecked.
See live example or the Stack Snippet below to understand better.
I need to show an alert when checking checkboxes in other divs that show a message "your selected items will be unchecked".
$("input:checkbox").on('change', e => {
$(e.target).closest('div').siblings().find('input:checkbox').prop('checked', false);
});
<div class="dashboard">
<div id="fr">
<h3>Fruits</h3>
<label>
<input type="checkbox" name="check1" />Kiwi</label>
<label>
<input type="checkbox" name="check2" />Jackfruit</label>
</div>
<div id="an">
<h3>Animals</h3>
<label>
<input type="checkbox" name="check1" />Tiger</label>
<label>
<input type="checkbox" name="check2" />Sloth</label>
</div>
<div id="veg">
<h3>vegetables</h3>
<label>
<input type="checkbox" name="check1" />Broccoli</label>
<label>
<input type="checkbox" name="check2" />Carrots</label>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Aucun commentaire:
Enregistrer un commentaire