只允許使用 jQuery 檢查同一 div 中的復選框

Question

我有 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);
 }
});

看現場例子

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