JavaScript 控制 radio 按钮的选中状态主要涉及到对 DOM 元素的操作。以下是一些基础概念和相关操作:
name
属性,以确保它们是互斥的。以下是如何使用 JavaScript 控制 radio 按钮的选中状态的示例:
<form id="myForm">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</form>
// 选中“Male”选项
document.querySelector('input[name="gender"][value="male"]').checked = true;
// 或者使用函数封装
function setRadioChecked(name, value) {
document.querySelector(`input[name="${name}"][value="${value}"]`).checked = true;
}
setRadioChecked('gender', 'female'); // 选中“Female”选项
原因:可能是由于 name
属性不一致或选择器错误。
解决方法:确保所有单选按钮的 name
属性相同,并检查选择器的准确性。
原因:新添加的元素尚未被 DOM 完全加载。 解决方法:使用事件监听或在添加元素后立即设置选中状态。
// 动态添加 radio 按钮
const newRadio = document.createElement('input');
newRadio.type = 'radio';
newRadio.name = 'gender';
newRadio.value = 'other';
document.getElementById('myForm').appendChild(newRadio);
// 立即设置选中状态
newRadio.checked = true;
通过以上方法,可以有效控制和管理 radio 按钮的选中状态,确保用户界面与预期行为一致。
领取专属 10元无门槛券
手把手带您无忧上云