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);
  alert("your selected items will be unchecked");
});

<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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use the same code that unchecks your other checkboxes to see if any will be unchecked:

$(e.target).closest('div').siblings().find('input:checkbox:checked').length > 0

Using a variable to reduce the amount of DOM navigation gives:

$("input:checkbox").on('change', e => {
  var otherCheckboxes = $(e.target).closest('div').siblings().find("input:checkbox")
  if (otherCheckboxes.filter(":checked").length > 0)
      alert("Your other options will be removed.");
  otherCheckboxes.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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

---

The UX could be improved by using confirm instead of an alert (or a proper UI dialog of course)

Show code snippet

$("input:checkbox").on('click', e => {
  if ($(this).is(":checked")) 
    return; 
  var otherCheckboxes = $(e.target).closest('div').siblings().find("input:checkbox")
  if (otherCheckboxes.filter(":checked").length > 0) {
      if (confirm("Your other options will be removed.  Continue?")) {
          otherCheckboxes.prop('checked', false);
      }
      else {
         return 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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>