单选按钮分组数组异常：结果混乱及取消出席未移除饮食分组

核心问题出在你之前可能直接操作全局数组导致状态覆盖，正确的思路是为每个用户维护独立的出席/饮食状态，最后再从状态集合中派生所需的四个数组，避免操作冲突。

实现步骤 #

1. 维护用户状态集合 #

用一个数组存储每个用户的完整状态，包含用户名、出席状态、饮食偏好三个字段：

// 初始化用户状态（可根据实际用户列表动态生成）
let userStatuses = [
  { name: 'John', attendance: 'no', dietary: null },
  { name: 'Alex', attendance: 'no', dietary: null }
];

2. 处理出席状态变更 #

当用户切换出席/拒绝时，更新对应状态，同时处理饮食偏好的重置与显示控制：

function handleAttendanceChange(username, value) {
  const user = userStatuses.find(u => u.name === username);
  if (!user) return;

  // 获取当前用户的饮食选项DOM
  const dietaryDiv = document.querySelector(`.user-form[data-username="${username}"] .dietary-options`);
  
  if (value === 'no') {
    // 切换为拒绝时，隐藏饮食选项并清空状态
    dietaryDiv.style.display = 'none';
    user.dietary = null;
    // 重置饮食radio按钮的选中状态
    document.querySelectorAll(`.user-form[data-username="${username}"] input[name="dietary-${username}"]`)
      .forEach(radio => radio.checked = false);
  } else {
    // 切换为出席时，显示饮食选项
    dietaryDiv.style.display = 'block';
  }

  // 更新出席状态
  user.attendance = value;
}

3. 处理饮食偏好变更 #

仅当用户选择出席时，才允许修改饮食偏好：

function handleDietaryChange(username, value) {
  const user = userStatuses.find(u => u.name === username);
  // 只有出席状态的用户才能修改饮食
  if (!user || user.attendance !== 'yes') return;
  
  user.dietary = value;
}

4. 生成提交用的四个数组 #

从用户状态集合中过滤派生所需的分组数组，避免直接修改全局数组导致的冲突：

// 生成出席用户数组
const attendingUsers = userStatuses
  .filter(u => u.attendance === 'yes')
  .map(u => u.name);

// 生成拒绝用户数组
const declinedUsers = userStatuses
  .filter(u => u.attendance === 'no')
  .map(u => u.name);

// 生成素食用户数组
const vegetarianUsers = userStatuses
  .filter(u => u.attendance === 'yes' && u.dietary === 'Vegetarian / Vegan')
  .map(u => u.name);

// 生成非素食用户数组
const nonVegetarianUsers = userStatuses
  .filter(u => u.attendance === 'yes' && u.dietary === 'Non-vegetarian')
  .map(u => u.name);

// 提交到数据库的逻辑
// submitToDatabase(attendingUsers, declinedUsers, vegetarianUsers, nonVegetarianUsers);

5. 前端DOM结构示例 #

每个用户的表单需绑定独立的radio组，避免组名冲突：

<div class="user-form" data-username="John">
  <p>John</p>
  <label>
    <input type="radio" name="attendance-John" value="yes" onchange="handleAttendanceChange('John', this.value)">
    出席
  </label>
  <label>
    <input type="radio" name="attendance-John" value="no" onchange="handleAttendanceChange('John', this.value)" checked>
    拒绝
  </label>
  <div class="dietary-options" style="display: none;">
    <label>
      <input type="radio" name="dietary-John" value="Vegetarian / Vegan" onchange="handleDietaryChange('John', this.value)">
      素食/纯素
    </label>
    <label>
      <input type="radio" name="dietary-John" value="Non-vegetarian" onchange="handleDietaryChange('John', this.value)">
      非素食
    </label>
  </div>
</div>

<div class="user-form" data-username="Alex">
  <p>Alex</p>
  <label>
    <input type="radio" name="attendance-Alex" value="yes" onchange="handleAttendanceChange('Alex', this.value)">
    出席
  </label>
  <label>
    <input type="radio" name="attendance-Alex" value="no" onchange="handleAttendanceChange('Alex', this.value)" checked>
    拒绝
  </label>
  <div class="dietary-options" style="display: none;">
    <label>
      <input type="radio" name="dietary-Alex" value="Vegetarian / Vegan" onchange="handleDietaryChange('Alex', this.value)">
      素食/纯素
    </label>
    <label>
      <input type="radio" name="dietary-Alex" value="Non-vegetarian" onchange="handleDietaryChange('Alex', this.value)">
      非素食
    </label>
  </div>
</div>

为什么能解决你的问题 #

• 每个用户的状态独立存储，修改一个用户的选择不会影响其他用户的状态
• 切换为拒绝时主动清空饮食偏好，确保用户不会留在素食/非素食数组中
• 最后通过过滤生成目标数组，避免了直接操作全局数组导致的覆盖或遗漏问题

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