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

Posted 2023-05-08

【中文标题】当复选框兄弟姐妹更改为选中时显示警报

【英文标题】：show alert when checkboxes siblings are changed to be checked

【发布时间】：2021-12-22 21:53:18

【问题描述】：

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

【问题讨论】：

嗨！ “查看实时示例以了解更多信息。”请使用 Stack Snippets（[<>] 工具栏按钮）将您的实时示例现场展示； here's how to do one。对于某些人来说，场外资源被阻止，链接随着时间的推移而失效，人们不应该去场外来帮助你。 编辑：问题中的代码似乎复制了您所描述的内容，因此我已将其复制到 Stack Snippet 中。 （不过，我没有查看链接的示例，因此您可能仍需要对其进行编辑。）

“我需要在选中其他 div 中的复选框时显示警报，这些复选框显示消息“您选择的项目将被取消选中”。” 我在尝试这样做的问题中的代码...？

我认为您正在寻找解决方案以在其他 div 中不受检查，不是吗？

这是来自 OP previous question 的后续问题 - 功能没有问题，只是添加了“警报”。

【参考方案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>