只允许使用 jQuery 检查同一 div 中的复选框

Posted 2023-05-08

【中文标题】只允许使用 jQuery 检查同一 div 中的复选框

【英文标题】：Allow Only Checkboxes in same div to be Checked using jQuery

【发布时间】：2021-12-21 06:09:08

【问题描述】：

我有 3 个 div，每个 div 包含 2 个输入，我只想选中具有 id 的同一 div 中的复选框，并且未选中其他 div。

html 是：

<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" />Tiger</label>
  <label>
   <input type="checkbox" name="check2" />Sloth</label>
 </div>

</div>

而 JQuery 是：

$("input:checkbox").on('click', function() 
 var $box = $(this);
 if ($box.is(":checked")) 
  var group = "input:checkbox[name='" + $box.attr("name") + "']";
  $(group).prop("checked", false);
  $box.prop("checked", true);
  else 
 $box.prop("checked", false);
 
);

见live example

【问题讨论】：

那么，您想要单选按钮吗？ jsfiddle.net/d85nxcgh 或 jsfiddle.net/d85nxcgh/1

单选按钮很有用，但我希望能够选中同一个 div 中的复选框并取消选中其他 div 中的所有复选框。

【参考方案1】：

如果您只想允许在单个 div 中选中复选框，您可以使用 jQuery 遍历 DOM，使用 closest()、siblings() 和 find() 在取消选中之前检索外部复选框.

试试这个：

$("input:checkbox").on('change', e => 
  $(e.target).closest('div').siblings().find('input:checkbox').prop('checked', false);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" />Tiger</label>
    <label><input type="checkbox" name="check2" />Sloth</label>
  </div>
</div>

【讨论】：

你的回答完全正确。