如何实现同一行内表单选项互斥：Never与其余选项、多选项间互斥

我来帮你搞定这个表单选项互斥的问题！首先咱们明确一下要实现的核心规则：

• 同一行内，“Never”不能与其他任何选项同时选中
• 同一行内，“Less often”“Monthly”“Weekly”这三个选项之间只能选一个

你现在遇到的问题，本质是现有逻辑没覆盖到Never和工作日选项的互斥，以及可能没按行来处理所有选项的关联。下面是完整的解决方案：

第一步：给选项分类（修改HTML） #

首先给每个复选框加上类名，方便JavaScript识别不同类型的选项，这样逻辑会更清晰：

• 给所有“Never”复选框加类 option-never
• 给“Less often”“Monthly”“Weekly”加类 option-frequency
• 给工作日选项加类 option-weekdays（如果你的工作日选项有其他名称，对应调整即可）

第二步：添加JavaScript逻辑 #

我们用原生JS绑定change事件，当用户点击任何复选框时，按规则处理同一行的其他选项：

<html>
<head>
  <title>Vlad</title>
  <script>
    // 页面加载完成后初始化事件
    document.addEventListener('DOMContentLoaded', function() {
      // 获取所有复选框
      const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
      
      allCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
          // 找到当前复选框所在的行容器（这里假设是最近的<td>，如果你的结构不同，换成对应的选择器，比如.option-row）
          const currentRow = this.closest('td');
          if (!currentRow) return;
          
          const isNever = this.classList.contains('option-never');
          const isFrequencyOption = this.classList.contains('option-frequency');
          
          // 处理Never的互斥逻辑
          if (isNever) {
            if (this.checked) {
              // 选中Never时，取消同一行所有其他复选框
              currentRow.querySelectorAll('input[type="checkbox"]:not(.option-never)').forEach(cb => {
                cb.checked = false;
              });
            }
          } else {
            // 选中其他选项时，自动取消同一行的Never
            const neverBox = currentRow.querySelector('.option-never');
            if (neverBox && this.checked) {
              neverBox.checked = false;
            }
            
            // 处理Frequency选项之间的互斥
            if (isFrequencyOption && this.checked) {
              // 取消同一行其他的Frequency选项
              currentRow.querySelectorAll('.option-frequency:not([id="' + this.id + '"])').forEach(cb => {
                cb.checked = false;
              });
            }
          }
        });
      });
    });
  </script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
  <table cellpadding="0" cellspacing="0" width="70%" style="padding:20px">
    <tr>
      <td style="border:2px solid;padding:5px">
        <b>This assignment consists of the following tasks:</b>
        <ul>
          <li>
            <!-- 第一行选项示例 -->
            <label><input type="checkbox" class="option-never" id="task1-never"> Never</label>
            <label><input type="checkbox" class="option-frequency" id="task1-less"> Less often</label>
            <label><input type="checkbox" class="option-frequency" id="task1-monthly"> Monthly</label>
            <label><input type="checkbox" class="option-frequency" id="task1-weekly"> Weekly</label>
            <label><input type="checkbox" class="option-weekdays" id="task1-weekdays"> Weekdays</label>
          </li>
          <li>
            <!-- 第二行选项示例 -->
            <label><input type="checkbox" class="option-never" id="task2-never"> Never</label>
            <label><input type="checkbox" class="option-frequency" id="task2-less"> Less often</label>
            <label><input type="checkbox" class="option-frequency" id="task2-monthly"> Monthly</label>
            <label><input type="checkbox" class="option-frequency" id="task2-weekly"> Weekly</label>
            <label><input type="checkbox" class="option-weekdays" id="task2-weekdays"> Weekdays</label>
          </li>
        </ul>
      </td>
    </tr>
  </table>
</body>
</html>

逻辑细节说明 #

1. Never的完全互斥：只要选中Never，同一行的所有其他选项（包括工作日、Frequency类选项）都会被自动取消；反过来，只要选中任何其他选项，同一行的Never会立刻取消选中，彻底解决你提到的“选中Never还能选工作日”的问题。
2. Frequency选项互斥：当选中Less often/Monthly/Weekly中的任意一个时，另外两个会被取消，保证这三个只能选一个。
3. 工作日选项：工作日可以和Frequency类选项同时选中（如果你的需求是工作日也不能和Frequency类选项共存，只需要把option-weekdays也加入Frequency的互斥逻辑里即可，调整一下选择器就行）。

适配提示 #

如果你的HTML行结构不是<td>（比如用<div>包每行选项），只需要把this.closest('td')换成对应的容器选择器，比如this.closest('.task-options')，确保能准确找到当前选项所在的行即可。

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