实现复选框联动：任意关联复选框选中时保持目标框选中

你要实现的逻辑是：

• 选中复选框1、3、4里任意一个，自动选中复选框2
• 要是多个上述复选框选中后，取消其中一个，只要还有1、3、4里的任意一个是选中状态，复选框2就得保持选中
• 只有当1、3、4全没选中的时候，才取消复选框2的选中状态

之前的代码问题出在，每次只把复选框2的状态改成当前点击的那个复选框的状态——比如先选1，复选框2选中；再选3，复选框2还是选中；但如果取消1，此时代码会把复选框2改成未选中，可这时候3还选中着呢，显然不符合需求。

修正后的代码 #

JavaScript #

// 把所有要触发联动的复选框（1、3、4）选出来
const triggerCheckboxes = $("input[type='checkbox'][value='1'], input[type='checkbox'][value='3'], input[type='checkbox'][value='4']");
const chk2 = $("input[type='checkbox'][value='2']");

// 给这些触发框绑定状态变化事件
triggerCheckboxes.on('change', function() {
    // 检查这一组里有没有至少一个被选中的
    const hasAnyChecked = triggerCheckboxes.is(':checked');
    // 根据这个结果设置复选框2的状态
    chk2.prop('checked', hasAnyChecked);
});

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1" class="user_name">1<br>
<input type="checkbox" value="2" class="user_name">2<br>
<input type="checkbox" value="3" class="user_name">3<br>
<input type="checkbox" value="4" class="user_name">4

逻辑说明 #

• 先把所有需要触发联动的复选框统一选取，不用单独定义三个变量，更简洁
• 每次触发框状态变了，就整体检查这一组里有没有选中的，而不是只看当前点的那个
• 只要有一个触发框选中，复选框2就保持选中；只有全没选中的时候，才取消复选框2的选中状态

小优化 #

你可以给1、3、4这几个复选框加个共同的类，比如trigger-checkbox，这样选择器写起来更简单：

<input type="checkbox" value="1" class="user_name trigger-checkbox">1<br>
<input type="checkbox" value="2" class="user_name">2<br>
<input type="checkbox" value="3" class="user_name trigger-checkbox">3<br>
<input type="checkbox" value="4" class="user_name trigger-checkbox">4

对应的JS选择器改成：

const triggerCheckboxes = $(".trigger-checkbox");

内容的提问来源于stack exchange，提问作者Tyler Henson