同一页面多表单场景下实现复选框组单选的jQuery最优方案咨询

最优实现方案 #

你现在的实现方式需要为每一组单独绑定事件、分配独立类名，表单数量多的时候维护成本极高，更高效的方案是通过DOM层级关系定位同组复选框，只需要一段代码就可以适配所有分组。

步骤1：统一HTML结构 #

PHP生成表单时，只需要给所有需要实现单选效果的复选框添加同一个通用类名（比如group-checkbox），不需要为每组分配独立类：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="">
  <input type="checkbox" class="group-checkbox"/>
  <input type="checkbox" class="group-checkbox"/>
  <input type="checkbox" class="group-checkbox"/>
  <input type="checkbox" class="group-checkbox"/>
</form>

<form action="">
  <input type="checkbox" class="group-checkbox"/>
  <input type="checkbox" class="group-checkbox"/>
  <input type="checkbox" class="group-checkbox"/>
  <input type="checkbox" class="group-checkbox"/>
</form>
<!-- 更多表单无需修改JS，直接按上述格式生成即可 -->

步骤2：绑定通用事件 #

只需要写一次事件绑定逻辑，点击复选框时自动查找它所属的表单容器，仅取消同表单内其他复选框的选中状态：

$('input.group-checkbox').on('change', function() {
  // 找到当前复选框所在的父表单，再选中同表单内的其他同类复选框，取消勾选
  $(this).closest('form').find('input.group-checkbox').not(this).prop('checked', false);
});

适配特殊结构 #

如果你的复选框不是直接放在form标签下，而是包裹在其他自定义容器（比如<div class="form-item">）中，只需要把closest('form')里的选择器替换成你的容器选择器即可，比如：

// 适配外层是class为form-item的div的场景
$('input.group-checkbox').on('change', function() {
  $(this).closest('.form-item').find('input.group-checkbox').not(this).prop('checked', false);
});

方案优势 #

• 无需为每组表单生成唯一标识，PHP生成逻辑更简单，不会出现类名重复/漏写的问题
• JS代码只需执行一次绑定，后续新增表单无需修改任何代码，自动适配
• 表单数量较多时，比重复绑定多组事件的性能更好

内容的提问来源于stack exchange，提问作者Brian Mutiso