实现单选按钮组联动：依前序组状态禁用并清空后续单选组

数据老陈

2026-7-10

薪资变更申请单选按钮联动实现方案

要实现你需要的两组单选按钮联动逻辑，按以下步骤修改代码：

1. HTML 部分调整

给第一组的两个单选按钮添加onchange事件，触发状态切换函数
初始状态下把第二组单选按钮设为禁用，符合“仅当选中Yes时才可使用”的要求

修改后的HTML代码：

<!-- First Pair Yes or No -->  
<input id="rd1" name="radioGroup1" type="radio" value="Yes" onchange="fn1()"> Yes
<input id="rd2" name="radioGroup1" type="radio" value="No" onchange="fn1()"> No
<br>
<!-- Second Pair To Disable If No Selected Above -->
<input id="rd3" name="radioGroup2" type="radio" value="Promotion" disabled> Promotion
<input id="rd4" name="radioGroup2" type="radio" value="Demotion" disabled> Demotion

2. JavaScript 函数完善

需要同时处理第二组的两个单选按钮，并且在切换到No时清空选中状态：

修改后的JS代码：

function fn1() {
    const rd3 = document.getElementById("rd3");
    const rd4 = document.getElementById("rd4");
    
    if (document.getElementById("rd1").checked) {
        // 选中Yes时，启用第二组所有单选按钮
        rd3.disabled = false;
        rd4.disabled = false;
    } else if (document.getElementById("rd2").checked) {
        // 选中No时，禁用第二组并清空选中状态
        rd3.disabled = true;
        rd4.disabled = true;
        rd3.checked = false;
        rd4.checked = false;
    }
}