当复选框兄弟姐妹更改为选中时显示警报

Question

我有 3 个 div，每个 div 包含 2 个复选框，当我选中同一个 div 中的任何复选框时没问题，但是当我选中复选框时在不同的 div 中，其他复选框未选中。

请参阅 live example 或下面的堆栈代码段以更好地理解。

我需要在其他 div 中选中显示消息“您选择的项目将被取消选中”的复选框时显示警告。

$("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>

Answer 1

您可以使用取消选中其他复选框的相同代码来查看是否有任何复选框将被取消选中：

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

使用变量减少 DOM 导航的数量给出：

$("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>

可以通过使用 confirm 而不是 alert（或者当然是适当的 UI 对话框）来改进用户体验

$("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>

当复选框兄弟姐妹更改为选中时显示警报

show alert when checkboxes siblings are changed to be checked

javascript

checkbox

jquery

alert