本文介绍如何使用 jquery 实现两个自定义样式的 toggle 开关按钮，使其保持互斥状态：任一开启时另一自动关闭，适用于单选式功能控制场景。
在前端开发中，有时需要模拟“单选式切换开关”（即仅允许一个处于开启状态），但原生 <input type="radio"> 无法直接复用其样式逻辑（因 radio 的 name 属性绑定依赖表单结构，而自定义 toggle 常基于 checkbox + CSS 实现）。此时，通过 JavaScript 手动管理状态是更灵活可靠的方案。
以下是一个完整、可运行的实现：
✅ 核心逻辑说明
我们为两个 checkbox（#toggle-1 和 #toggle-2）绑定统一的点击事件处理器 uncheck()：当任一开关被点击时，遍历所有目标 ID 列表，将除当前触发元素外的其他开关设为未勾选（checked = false），从而确保二者始终互斥。
? 完整 HTML + CSS + JS 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>互斥 Toggle 开关</title>
<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: #46c146;
border-color: #46c146;
}
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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
const toggleIds = ["toggle-1", "toggle-2"];
function enforceMutualExclusion(event) {
const clickedId = event.target.id;
toggleIds.forEach(id => {
if (id !== clickedId) {
document.getElementById(id).checked = false;
}
});
}
$("#toggle-1, #toggle-2").on("click", enforceMutualExclusion);
</script>
</body>
</html>⚠️ 注意事项
- 避免重复绑定：若页面动态插入开关，需使用事件委托（如 $(document).on('click', '#toggle-1', ...)）防止多次绑定；
- 无障碍支持：当前实现已保留 <label for="..."> 结构，确保屏幕阅读器可识别；建议为每个开关添加 aria-label 提升可访问性；
- 纯 JS 替代方案：如项目不依赖 jQuery，可用 document.querySelectorAll(...).forEach(el => el.addEventListener('click', ...)) 等原生写法替代；
- 样式兼容性：appearance: none 需配合 -webkit-appearance 以支持 Safari；圆角、过渡等 CSS 属性在主流浏览器中均表现良好。
✅ 总结
该方案轻量、直观、易于扩展——只需维护 toggleIds 数组，即可快速接入更多互斥开关。它绕过了 radio 的语义限制，又保留了 checkbox 的样式自由度，是构建定制化 UI 控件的典型实践。
