mercredi 10 novembre 2021

show alert when checkboxes siblings are changed to be checked

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