实现两个Toggle按钮互斥切换功能的技术咨询

我需要两个Toggle按钮实现互斥逻辑：当First Toggle切换为开启状态（绿色）时，Second Toggle自动关闭（红色）；反之，当Second Toggle开启时，First Toggle自动关闭。以下是我当前的CSS和HTML代码：

现有CSS代码 #

div.switcher label {
    padding: 0;
}
div.switcher label input {
    display: none;
}
div.switcher label * {
    vertical-align: middle;
}
input:checked {
    background-color: #46c146;
    gap: 10px;
    border: 4px solid red;
}
input[type=checkbox], input[type=radio] {
    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;
    cursor: pointer;
}
div.switcher label input:checked+span {
    background: green;
    border-color: green;
}
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 small {
    left: 50%;
}
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;
}

现有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>
    <small></small>
  </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>
    <small></small>
  </label>
</div>

解决方案 #

方案1：用JavaScript实现Checkbox互斥

保留原有Checkbox结构，通过监听状态变化控制另一个Toggle的开关：

添加以下JavaScript代码（放在</body>标签前，或用DOMContentLoaded确保元素加载完成）：

document.addEventListener('DOMContentLoaded', () => {
  const toggles = document.querySelectorAll('.my_features');
  
  toggles.forEach(toggle => {
    toggle.addEventListener('change', function() {
      if (this.checked) {
        // 关闭其他所有Toggle
        toggles.forEach(other => {
          if (other !== this) other.checked = false;
        });
      }
    });
  });
});

这个方案支持手动取消选中当前Toggle（即两个都处于关闭状态），如果需要强制必须选中一个，可调整逻辑。

方案2：改用Radio按钮（原生互斥，无需JS）

Radio按钮原生支持同组互斥，只需修改HTML结构，现有CSS已兼容Radio控件：

修改后的HTML代码：

<label>First Toggle</label>
<div class="switcher">
  <label for="toggle-1">
    <input id="toggle-1" class="my_features" type="radio" name="toggle-group">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>

<label>Second Toggle</label>
<div class="switcher">
  <label for="toggle-2">
    <input id="toggle-2" class="my_features" type="radio" name="toggle-group">
      <span>
        <small></small>
      </span>
    <small></small>
  </label>
</div>

只需给两个Radio设置相同的name属性，浏览器会自动处理互斥逻辑，无需额外JS。注意：Radio按钮默认无法取消选中，必须保持一个选中状态。

样式优化提示 #

现有CSS中input:checked的样式和Toggle的span样式可能存在优先级冲突，可将input:checked选择器改为div.switcher label input:checked，确保样式只作用于Toggle内部的输入框，避免干扰其他控件。

内容的提问来源于stack exchange，提问作者Anonymous Girl