JavaScript单选框(Radio)交互原理与代码实现

单选框与复选框的核心差异

在HTML应用中，单选框和复选框虽然都用于用户选择，但其交互逻辑截然不同。复选框类似于开关，用户可以独立地选中或取消任何一个选项，互不影响。而单选框设计用于从一组选项中做出唯一选择。一旦某个单选框被选中，若要取消它，用户无法再次点击该框，必须选择组内的另一个选项。

实现互斥选择的代码示例

为了直观展示这一特性，我们构建一个简单的表单场景：通过两个单选框控制页面背景颜色，模拟“灯”的开与关。当用户点击其中一个选项时，不仅当前选项变亮，其他选项的状态也需要在脚本中被准确管理。

<form name="form_1">
        <input type="radio" name="radio_1" onClick="offButton();"> Light off
        <input type="radio" name="radio_2" onClick="onButton();" checked> Light on
</form>

在此结构中，name="radio_1"（尽管第二个也用了相似命名以便JS获取，实际建议统一name以实现原生互斥，但此处为演示脚本控制逻辑使用了分别的事件处理）和 name="radio_2" 分别绑定了 onClick 事件。初始状态下，“Light on”为选中状态。

第1步：处理关闭逻辑(offButton)

当用户点击第一个单选框时，触发 offButton() 函数。其目的是检查当前状态，并强制取消另一个选项的选中状态，同时改变页面背景。

function offButton()
{
     var the_box = window.document.form_1.radio_1;
     if (the_box.checked == true)
     {
         // 关键步骤：手动取消兄弟节点或相关节点的选中状态
         window.document.form_1.radio_2.checked = false;
         document.bgColor = 'black';
         alert("Hey! Turn that back on!");
     }
}

这段代码的关键在于 window.document.form_1.radio_2.checked = false;。这行指令指示JavaScript在该按钮被点击时，若确认当前为选中状态，则必须将相关联的另一个按钮设为未选中，从而维持逻辑上的一致性（尽管原生HTML单选框通常靠同名自动互斥，但在复杂JS交互中显式控制更稳妥）。

第2步：处理开启逻辑(onButton)

类似地，当点击“Light on”时，调用 onButton()。函数会检测 radio_2 是否被选中，如果是，则确保 radio_1 未被选中，并将背景恢复为白色。

function onButton()
{
     var the_box = window.document.form_1.radio_2;
     if (the_box.checked == true)
     {
         window.document.form_1.radio_1.checked = false;
         document.bgColor = 'white';
         alert("Thanks!");
     }
}

完成判断

当运行上述代码并交替点击两个按钮时，可观察到以下现象：
1. 页面背景色在黑白之间随按钮切换而变化。
2. 每个按钮在被点击选中时，会自动触发对另一个按钮的取消选中操作。
3. 弹窗提示会根据操作方向给出相应反馈。这验证了通过DOM操作 checked 属性可以实现精细的单选框互斥控制。

简要总结

单选框的处理核心在于理解其互斥本质。虽然HTML原生属性可以辅助实现，但在JavaScript中通过获取DOM对象并直接操作 checked 布尔值，可以更灵活地结合业务逻辑，如改变样式、触发警告或执行其他异步任务。掌握这种基于事件监听的交互模式，是构建动态网页表单的基础。

以上就是JavaScript中单选框交互原理与代码实现的详细内容，更多关于JavaScript表单处理与DOM操作的资料请关注本站其它相关文章！