当前位置：首页 > 前端开发 > 正文

HTML radio如何设置选中？

在HTML中，通过为radio类型的input元素添加 checked属性即可设置默认选中状态，同一组radio（相同name属性）中只能有一个被选中，示例：“，动态修改可使用JavaScript设置checked属性为true。

在HTML中,单选按钮（radio）通过name属性分组实现互斥选择，设置选中状态的核心方法是使用checked属性或JavaScript动态控制，以下是详细方法：

HTML radio如何设置选中？ 第1张

HTML静态设置（checked属性）

在HTML标签内直接添加checked属性，该按钮会默认选中：

<form>
  <label>
    <input type="radio" name="color" value="red" checked> 红色 
  </label>
  <label>
    <input type="radio" name="color" value="blue"> 蓝色
  </label>
</form>

关键点：

  • checked是布尔属性，无需赋值，存在即生效
  • 同组radio的name值必须相同才能互斥
  • 表单提交时,选中的value值将被发送到服务器

JavaScript动态设置

方法1：直接操作DOM

// 通过value值选中
document.querySelector('input[type="radio"][value="blue"]').checked = true;
// 通过ID选中
document.getElementById("blueRadio").checked = true;

方法2：遍历按钮组

const radios = document.getElementsByName("color");
radios.forEach(radio => {
  if (radio.value === "blue") {
    radio.checked = true;
  }
});

jQuery设置（v3.6+示例）

// 按value值选中
$('input[name="color"][value="blue"]').prop('checked', true);
// 通过ID选中
$("#blueRadio").prop("checked", true);

注意事项

  1. 互斥性：同组radio必须共享相同name，否则无法互斥
  2. 动态创建：新增radio需用JS重新绑定事件 
    const newRadio = document.createElement("input");
newRadio.type = "radio";
newRadio.name = "color";
newRadio.value = "green";
document.querySelector("form").appendChild(newRadio);
  3. 表单重置：需监听<form>的reset事件或使用<button type="reset">
  4. 可访问性：始终关联<label>提升体验 
    <input id="r1" type="radio" name="group">
<label for="r1">选项文本</label>

最佳实践建议

  • 默认选中：在HTML中使用checked属性确保首屏渲染正确
  • 动态更新：优先使用document.querySelector精准操作
  • 框架适配：在Vue/React中使用双向绑定（如v-model/onChange）
  • 兼容性：所有现代浏览器均支持checked属性

引用说明：本文内容参考MDN Web文档关于HTMLInputElement的权威定义，并结合W3C标准实践验证，jQuery API参考官方.prop()文档。

0

相关文章