本文介绍如何使用 jquery 实现两个自定义样式开关按钮的互斥逻辑：当用户点击任一开关时，另一个自动关闭，确保两者始终处于相反状态。
在构建表单或配置面板时，常需实现“二选一”的开关控制逻辑——例如启用某功能时自动禁用另一功能。本教程将手把手带你完成一个双向互斥切换（exclusive toggle）效果：两个带 CSS 自定义样式的开关按钮，彼此状态严格对立（First Toggle 为 checked 时，Second Toggle 必须为 unchecked，反之亦然）。
✅ 核心思路
利用 jQuery 监听两个 <input type="checkbox"> 的 click 事件，当任一被点击时，遍历所有目标开关 ID，将其余开关设为 checked = false。由于原生 checkbox 不具备“单选组”语义（name 属性对 type="checkbox" 无效），必须通过 JavaScript 显式控制。
?️ 完整实现代码
1. HTML 结构（保持语义清晰）
<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>⚠️ 注意：已移除冗余 <small> 标签（原示例中每个 label 内有两个 <small>，仅需一个用于滑块），避免样式错位。
2. CSS 样式（精简优化版）
.switcher label {
padding: 0;
cursor: pointer;
}
.switcher label input {
display: none; /* 隐藏原生 checkbox */
}
.switcher label * {
vertical-align: middle;
}
/* 滑块容器 */
.switcher label input + span {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
background: #ff4d4d; /* 默认红色背景 */
border: 2px solid #ff4d4d;
border-radius: 50px;
transition: all 0.3s ease-in-out;
margin-right: 10px;
}
/* 滑块小圆点 */
.switcher label input + span small {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #fff;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
/* 选中状态：背景变绿，滑块右移 */
.switcher label input:checked + span {
background: #46c146;
border-color: #46c146;
}
.switcher label input:checked + span small {
left: 50%;
}3. jQuery 交互逻辑（简洁可靠）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
const toggleIds = ["toggle-1", "toggle-2"];
function enforceExclusive(event) {
const clickedId = event.target.id;
toggleIds.forEach(id => {
if (id !== clickedId) {
$(`#${id}`).prop('checked', false);
}
});
}
// 绑定点击事件（推荐使用 delegated event 更健壮）
$("#toggle-1, #toggle-2").on("click", enforceExclusive);
});
</script>✅ 优势说明：
- 使用 .prop('checked', false) 而非 .attr()，确保 DOM 状态与 JS 控制一致；
- 采用 $(document).ready() 确保 DOM 加载完成后再绑定事件；
- 支持未来扩展：只需向 toggleIds 数组添加新 ID 即可纳入互斥组。
? 注意事项
- ❌ 不要使用 type="radio" 替代：虽然 radio 天然互斥，但无法实现独立样式控制（尤其滑块动画），且 appearance: none 在部分浏览器中对 radio 支持不稳定；
- ✅ 若需初始状态（如默认第一个开启），直接在 HTML 中添加 checked 属性：<input id="toggle-1" checked>；
- ? 兼容性：jQuery 3.3+ 支持 IE9+，如需纯 JS 方案，可用 addEventListener 替代（原理相同）。
通过以上三步，你即可获得一组视觉统一、逻辑严谨、体验流畅的互斥开关组件。此模式广泛适用于功能开关、主题切换、模式选择等场景，是前端交互设计中的经典实践。
