JavaScript修改单选框选中状态的常见误区与正确写法

JavaScript修改单选框选中状态的常见误区与正确写法

今天遇到一个实际需求，需要通过JavaScript代码动态改变单选框的选中状态。

function doGender(gender) {
if (gender == "男") {
gel("radionan").style.checked = "checked";
} else {
gel("radionv").style.checked = "checked";
　　}
}
function gel(id) {
 return document.getElementById(id);
}

执行后发现没有任何反应。

因为在HTML标签中，设置选中状态通常写作checked="checked"，所以直觉上认为在JS中给gel("radionv").style.checked赋值"checked"即可。查阅资料后发现理解有误。

实际上，在JavaScript中要使单选框选中，需要将checked属性赋值为布尔值true。

于是将代码修改为：

function doGender(gender) {
if (gender == "男") {
gel("radionan").style.checked = true;
} else {
gel("radionv").style.checked = true;
　　}
}

再次执行，依然没有反应，令人困惑。问题究竟出在哪里？

难道不应该操作style属性吗？

直接在控制台调用gel("radionan")并查看其属性，可以发现checked是DOM元素本身的属性，而非style对象的属性。

确认无误后，最终代码如下：

function doGender(gender) {
if (gender == "男") {
gel("radionan").checked = true;
} else {
gel("radionv").checked = true;
　　}
}

执行结果符合预期。

至此问题解决。