本文介绍如何使用 jquery 实现两个自定义样式开关按钮的互斥逻辑：当一个开启时另一个自动关闭，适用于需要二选一控制场景，如模式切换、功能开关等。
在 Web 开发中，常需用视觉友好的开关（toggle）替代原生复选框，实现“非此即彼”的状态控制。本文以两个绿色/红色风格的自定义 toggle 按钮为例，讲解如何通过 jQuery 实现严格互斥行为：点击任一按钮开启时，另一按钮自动关闭，确保始终仅有一个处于 checked 状态。
✅ 核心逻辑说明
互斥的关键在于监听任一 checkbox 的 click 事件，并在触发时遍历所有关联开关，将除当前目标外的其他开关设为未选中。注意：必须使用 click（而非 change），因为自定义样式隐藏了原生 input，用户实际点击的是 <label>，而 label 的 click 会触发 input 的 checked 状态变更，但 change 事件可能因 DOM 更新时机问题延迟或失效。
? 完整可运行代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>互斥 Toggle 开关</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
div.switcher label {
padding: 0;
}
div.switcher label input {
display: none;
}
div.switcher label * {
vertical-align: middle;
}
input[type=checkbox] {
cursor: pointer !important;
width: 38px;
height: 38px;
background-color: green;
border-radius: 54%;
vertical-align: middle;
border: 3px double red;
appearance: none;
-webkit-appearance: none;
outline: none;
}
div.switcher label input+span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 50px;
height: 26px;
background: red;
border: 2px solid red;
border-radius: 50px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
div.switcher label input:checked+span {
background: green;
border-color: green;
}
div.switcher label input+span small {
position: absolute;
display: block;
width: 50%;
height: 100%;
background: #fff;
border-radius: 50%;
transition: all 0.3s ease-in-out;
left: 0;
}
div.switcher label input:checked+span small {
left: 50%;
}
</style>
</head>
<body>
<label>First Toggle</label>
<div class="switcher">
<label for="toggle-1">
<input id="toggle-1" class="my_features" type="checkbox">
<span><small></small></span>
</label>
</div>
<label>Second Toggle</label>
<div class="switcher">
<label for="toggle-2">
<input id="toggle-2" class="my_features" type="checkbox">
<span><small></small></span>
</label>
</div>
<script>
const toggleIds = ["toggle-1", "toggle-2"];
function enforceMutualExclusion(event) {
const currentId = event.target.id;
toggleIds.forEach(id => {
if (id !== currentId) {
document.getElementById(id).checked = false;
}
});
}
// 绑定 click 事件（推荐）——确保样式响应与状态同步
$("#toggle-1, #toggle-2").on("click", enforceMutualExclusion);
</script>
</body>
</html>⚠️ 注意事项与优化建议
- 避免重复绑定：若页面动态插入 toggle 元素，请使用事件委托（如 $(document).on('click', '#toggle-1', handler)）；
- 无障碍支持（a11y）：当前方案依赖 label[for] 关联，已满足基本可访问性；如需键盘操作（Tab + Space），请确保 input 未被 display: none 完全移出流——可改用 opacity: 0; position: absolute; 并添加 aria-checked 同步更新；
- 纯 CSS 方案局限：纯 CSS 无法跨元素通信，故互斥逻辑必须借助 JS；若项目禁用 jQuery，可用原生 addEventListener 替代；
- 扩展性提示：将 toggleIds 改为选择器（如 document.querySelectorAll('.mutual-toggle')）可轻松支持 N 个互斥开关。
通过以上实现，你将获得一个语义清晰、样式可控、行为可靠的双态互斥开关组件，可直接集成至管理后台、设置面板等需要明确单选语义的交互场景中。
