HTML表单中radio与checkbox的使用及默认选中设置
HTML表单是网页与用户交互的核心元素，而 <input> 标签的不同类型可以实现各类选择交互，其中 radio（单选框）和 checkbox（复选框）是最常用的两种选择组件。本文将详细介绍二者的使用方法以及如何设置默认选中状态。
一、radio单选框的使用
radio 用于实现一组选项中只能选择一个的场景，比如性别选择、支付方式选择等。使用时需要注意以下核心要点：
多个
radio要实现互斥选择，必须设置相同的name属性值每个
radio需要通过value属性定义提交给后端的值可以通过
label标签关联radio，提升点击区域和可用性
1.1 radio基础使用示例
以下是一个性别选择的radio示例，包含默认选中设置：
<form action="https://www.ipipp.com/submit" method="post"> <p>请选择您的性别：</p> <!-- 男选项，设置默认选中 --> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">男</label> <!-- 女选项 --> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> <!-- 保密选项 --> <input type="radio" id="secret" name="gender" value="secret"> <label for="secret">保密</label> <input type="submit" value="提交"> </form>
上述代码中，checked 属性就是设置radio默认选中的关键，添加了该属性的选项会在页面加载时自动被选中。同一个 name 组下只能有一个 radio 设置 checked，否则后面的设置会覆盖前面的。
二、checkbox复选框的使用
checkbox 用于实现多选场景，比如兴趣爱好选择、协议勾选等。与radio不同，checkbox的 name 属性可以根据需求设置：如果是同组多选，建议设置相同 name；如果是独立选项，也可以设置不同 name。
2.1 checkbox基础使用示例
以下是一个兴趣爱好选择的checkbox示例，包含多个默认选中设置：
<form action="https://www.ipipp.com/submit" method="post"> <p>请选择您的兴趣爱好（可多选）：</p> <!-- 篮球选项，默认选中 --> <input type="checkbox" id="basketball" name="hobby" value="basketball" checked> <label for="basketball">篮球</label> <!-- 音乐选项 --> <input type="checkbox" id="music" name="hobby" value="music"> <label for="music">音乐</label> <!-- 阅读选项，默认选中 --> <input type="checkbox" id="reading" name="hobby" value="reading" checked> <label for="reading">阅读</label> <!-- 旅行选项 --> <input type="checkbox" id="travel" name="hobby" value="travel"> <label for="travel">旅行</label> <input type="submit" value="提交"> </form>
checkbox的默认选中同样是添加 checked 属性，与radio不同的是，同组checkbox可以有多个设置 checked，页面加载时这些选项都会被默认选中。
三、设置默认选中的注意事项
无论是radio还是checkbox，设置默认选中时需要注意以下规则：
checked是布尔属性，只要存在该属性，无论属性值是什么（甚至不写属性值），都会被视为选中状态。例如<input type="radio" checked="false">仍然会被默认选中，因此不需要给checked赋值，直接添加属性即可如果需要通过JavaScript动态设置默认选中，可以操作元素的
checked属性，示例如下：
// 选中id为female的radio
document.getElementById("female").checked = true;
// 取消选中id为reading的checkbox
document.getElementById("reading").checked = false;在表单提交时，只有被选中的radio或checkbox的
value值会被提交到后端，未选中的选项不会出现在提交数据中
四、常见问题说明
很多开发者会遇到设置了 checked 但默认选中不生效的问题，通常有以下原因：
radio同组多个设置
checked，导致只有最后一个生效JavaScript代码在页面加载完成前执行，找不到对应的元素，导致设置失败。可以将JS代码放在
window.onload中或者放在页面底部执行CSS样式隐藏了选中状态，比如自定义了radio/checkbox的样式，未正确设置选中状态的样式显示
掌握radio和checkbox的使用及默认选中设置，是开发表单交互功能的基础，合理运用可以提升用户填写表单的效率和体验。