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

HTML radio如何设置选中？

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

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

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

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

HTML静态设置（checked属性）

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

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

<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

相关文章