如何实现表单单个区块仅选一个+和一个-选项？

问题根源 #

你原来用CSS相邻兄弟选择器的方法存在局限性：只能控制选中元素之后的同类型选项，前面的选项无法被管控；而且当取消选中某选项后，之前被禁用的选项不会自动恢复可用状态，所以必须通过JavaScript实现跨元素的单选逻辑。

实现思路 #

把所有Plus选项归为一组，所有Minus选项归为另一组，每组内仅允许选中一个选项——点击某选项时，自动取消同组其他选项的选中状态，同时保留你原有的样式设计。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <title>My HTML page</title>
  <style>
    /* 统一复选框基础样式 */
    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border: 1px solid #999;
      border-radius: 3px;
      padding: 5px;
      cursor: pointer;
    }

    /* 未选中状态样式 */
    input[type="checkbox"]:not(:checked) {
      background-color: #fff;
    }

    /* 选中状态样式（Plus/Minus可分开设置不同颜色） */
    input[type="checkbox"][value="plus"]:checked,
    input[type="checkbox"][value="minus"]:checked {
      background-color: #000;
    }
  </style>
</head>
<body>
  <form>
    <p>Question 1:</p>
    <input type="checkbox" name="q1" value="plus" class="plus-option"> Plus
    <input type="checkbox" name="q1" value="minus" class="minus-option"> Minus

    <p>Question 2:</p>
    <input type="checkbox" name="q2" value="plus" class="plus-option"> Plus
    <input type="checkbox" name="q2" value="minus" class="minus-option"> Minus

    <p>Question 3:</p>
    <input type="checkbox" name="q3" value="plus" class="plus-option"> Plus
    <input type="checkbox" name="q3" value="minus" class="minus-option"> Minus

    <p>Question 4:</p>
    <input type="checkbox" name="q4" value="plus" class="plus-option"> Plus
    <input type="checkbox" name="q4" value="minus" class="minus-option"> Minus

    <br>
    <br>
    <input type="submit" value="Submit">
  </form>

  <script>
    // 处理Plus组单选逻辑
    const plusOptions = document.querySelectorAll('.plus-option');
    plusOptions.forEach(option => {
      option.addEventListener('click', () => {
        if (option.checked) {
          // 取消同组其他选项的选中状态
          plusOptions.forEach(other => {
            if (other !== option) other.checked = false;
          });
        }
      });
    });

    // 处理Minus组单选逻辑
    const minusOptions = document.querySelectorAll('.minus-option');
    minusOptions.forEach(option => {
      option.addEventListener('click', () => {
        if (option.checked) {
          // 取消同组其他选项的选中状态
          minusOptions.forEach(other => {
            if (other !== option) other.checked = false;
          });
        }
      });
    });
  </script>
</body>
</html>

代码说明 #

1. HTML部分：给每个Plus复选框添加plus-option类，Minus复选框添加minus-option类，方便JavaScript批量定位元素。
2. CSS部分：保留了你原有的复选框样式，若需要区分Plus和Minus的选中颜色，可单独修改对应的background-color值。
3. JavaScript部分：给每组复选框绑定点击事件，当某选项被选中时，遍历同组所有选项，将当前选项之外的其他选项设为未选中状态，严格实现组内单选效果。

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