在Web开发中，经常会遇到复选框联动的需求，比如设置一个Any选项，当勾选Any时，其他选项自动取消选中，且此时不能单独勾选其他选项；取消Any时，其他选项恢复可选状态。但很多开发者用jQuery实现这类逻辑时会遇到联动失效的问题，比如状态切换不生效、属性修改后界面无变化等。
问题原因分析
复选框联动失效的核心原因通常是错误使用了attr方法来操作checked属性。在jQuery中，attr方法获取的是元素初始渲染时的属性值，而复选框的checked状态属于动态属性，修改后需要用prop方法来获取和操作，否则就会出现状态不同步的问题。
实现思路
- 给Any复选框绑定change事件，监听其选中状态变化
- 当Any被勾选时，将其他选项的checked属性设为false，同时禁用其他选项
- 当Any被取消勾选时，恢复其他选项的可选状态，不修改其他选项的选中状态
- 给其他选项绑定change事件，当Any处于勾选状态时，阻止其他选项的选中操作
完整代码实现
以下是完整的HTML和jQuery实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复选框Any联动示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="checkbox-group">
<label><input type="checkbox" id="anyCheckbox"> Any</label><br>
<label><input type="checkbox" class="otherCheckbox" value="option1"> 选项1</label><br>
<label><input type="checkbox" class="otherCheckbox" value="option2"> 选项2</label><br>
<label><input type="checkbox" class="otherCheckbox" value="option3"> 选项3</label>
</div>
<script>
$(function() {
// 监听Any复选框的变化
$('#anyCheckbox').on('change', function() {
// 使用prop获取当前选中状态，避免attr的状态同步问题
var isAnyChecked = $(this).prop('checked');
if (isAnyChecked) {
// Any被勾选，取消其他选项的选中，同时禁用其他选项
$('.otherCheckbox').prop('checked', false).prop('disabled', true);
} else {
// Any被取消，恢复其他选项的可选状态
$('.otherCheckbox').prop('disabled', false);
}
});
// 监听其他选项的变化
$('.otherCheckbox').on('change', function() {
// 如果Any处于勾选状态，阻止其他选项的选中操作
if ($('#anyCheckbox').prop('checked')) {
$(this).prop('checked', false);
}
});
});
</script>
</body>
</html>关键注意点
代码中所有操作复选框选中状态和禁用状态的地方都使用了prop方法，这是避免联动失效的核心。如果换成attr方法，就会出现修改后界面状态不更新的问题。另外，给其他选项绑定change事件时，要先判断Any的当前状态，避免逻辑冲突。
如果需要保存其他选项之前的状态，还可以在Any勾选时把其他选项的选中状态存到变量里，取消Any时再恢复，根据实际需求调整逻辑即可。