如何实现单选按钮联动互斥？现有代码首次有效后失效问题排查

我明白你的需求：当两个玩家选中了相同的X/O选项时，自动修改另一个玩家的选择。你的代码第一次有效之后失效，主要问题出在用setAttribute('checked', 'true')设置单选按钮状态的方式，以及事件处理逻辑的局限性上。

原代码的问题分析 #

1. 单选按钮的checked属性处理错误：单选按钮的选中状态是通过DOM元素的checked布尔属性控制的，而不是HTML属性。使用setAttribute设置的是HTML属性，这只会在初始渲染时生效，后续动态修改应该直接操作element.checked这个布尔值。
2. 事件逻辑的片面性：你的checkRadios函数只处理了"当option1被点击时，检查option2是否选中，然后设置option3"，但没有考虑到状态变化后的连锁反应，也没有统一的状态校验逻辑。

修正后的实现方案 #

我们可以简化逻辑：监听所有单选按钮的change事件，每次触发时检查两个玩家的选择是否重复，如果重复，就把另一个玩家的选项切换到相反的那个。

<p> Player 1: <input type="text" name="player1Name"> <input type="radio" name="option1" value="X" id='option1X'/>&nbsp;X <input type="radio" name="option1" value="O" id='option1O' />&nbsp;O </p>
<p> Player 2: <input type="text" name="player2Name"> <input type="radio" name="option2" value="X" id='option2X' />&nbsp;X <input type="radio" name="option2" value="O" id='option2O'/>&nbsp;O </p>

<script>
// 获取所有单选按钮元素
const player1Radios = document.querySelectorAll('input[name="option1"]');
const player2Radios = document.querySelectorAll('input[name="option2"]');

// 定义校验并调整选择的函数
function resolveConflict() {
    // 获取当前两个玩家的选中值
    const player1Choice = Array.from(player1Radios).find(r => r.checked)?.value;
    const player2Choice = Array.from(player2Radios).find(r => r.checked)?.value;

    // 如果两个选择重复，调整第二个玩家的选择
    if (player1Choice && player2Choice && player1Choice === player2Choice) {
        // 找到玩家2未选中的那个选项并设置为选中
        const oppositeOption = Array.from(player2Radios).find(r => r.value !== player1Choice);
        if (oppositeOption) {
            oppositeOption.checked = true;
        }
    }
}

// 给所有单选按钮绑定change事件
player1Radios.forEach(radio => radio.addEventListener('change', resolveConflict));
player2Radios.forEach(radio => radio.addEventListener('change', resolveConflict));
</script>

代码说明 #

• 统一状态校验：每次任何一个单选按钮变化时，都会触发resolveConflict函数，检查两个玩家的选择是否冲突。
• 正确设置选中状态：直接操作radio.checked = true来修改单选按钮的选中状态，这是DOM元素的原生属性，动态修改更可靠。
• 逻辑简洁清晰：通过querySelectorAll获取同一组的单选按钮，用数组方法快速找到选中值和相反选项，避免了重复的事件绑定逻辑。

这样修改后，不管是第一次还是后续的选择，只要出现冲突都会自动调整另一个玩家的选项，不会出现失效的问题。

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