使用jQuery实现仅允许勾选同一div内的同名复选框

需求说明 #

现有3个div，每个div内包含2个input复选框。需求为：勾选某个复选框时，仅允许当前复选框所属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);
 }
});

内容的提问来源于stack exchange，提问作者Yousef Salama