JavaScript 单选框与复选框的区别及交互实现

单选框与复选框的行为差异

在 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>

当用户选中第一个单选框时，会触发调用 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 在点击当前按钮时，将另一个单选框的选中状态设置为 false（即取消选中）。由于另一个单选框对应的函数逻辑与此非常相似，具体实现如下：

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