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

认真发呆

发布时间：2026-10-13| 5人浏览过

原创

在Web开发中，理解单选框（Radio）的逻辑至关重要。与复选框允许多项选择不同，单选框的核心特性是"互斥性"，即在同一名称组中只能保持一个选中状态。本文将通过分析具体代码案例，展示如何利用JavaScript监听点击事件、读取元素状态并动态修改页面外观。

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

在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!");
     }
}