HTML单选复选框的基础认知
在HTML表单开发中，单选框和复选框都是用户完成选择操作的常用组件，二者都基于<input>标签实现，核心差异在于type属性的取值不同。单选框对应type="radio"，复选框对应type="checkbox"，同时还需要配合name、value等属性实现功能逻辑。
核心属性说明
- type：指定INPUT的类型，单选框取值为radio，复选框取值为checkbox
- name：元素名称，单选框同组需要设置相同的name值，才能实现互斥选择效果
- value：选中后提交到后端的值，不设置则提交空值
- checked：布尔属性，设置后默认选中该选项
- id：元素唯一标识，通常和
<label>标签的for属性配合，扩大点击选择范围
单选框的制作方法
单选框的核心特点是同组内只能选择一个选项，因此需要保证同组单选框的name属性值一致。以下是一个性别选择的单选框示例：
<form action="/submit" method="post"> <p>请选择性别：</p> <!-- 单选框组，name相同实现互斥 --> <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="other" name="gender" value="other"> <label for="other">其他</label> <button type="submit">提交</button> </form>
上面的代码中，三个单选框的name都设置为gender，因此只能选择其中一个。第一个单选框添加了checked属性，页面加载后默认选中“男”。label标签的for属性和对应input的id绑定，点击文字也能触发选择，提升了用户操作的便利性。
复选框的制作方法
复选框支持同时选择多个选项，同组复选框的name可以设置为相同值（方便后端接收数组），也可以设置为不同值，根据业务需求调整即可。以下是一个兴趣选择的复选框示例：
<form action="/submit" method="post"> <p>请选择你的兴趣（可多选）：</p> <!-- 复选框组，可同时选择多个 --> <input type="checkbox" id="sports" name="hobby" value="sports"> <label for="sports">运动</label> <input type="checkbox" id="music" name="hobby" value="music" checked> <label for="music">音乐</label> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">阅读</label> <input type="checkbox" id="travel" name="hobby" value="travel" checked> <label for="travel">旅行</label> <button type="submit">提交</button> </form>
上述代码中，四个复选框的name都设置为hobby，提交时后端可以接收到名为hobby的数组，包含选中的值。其中“音乐”和“旅行”两个选项添加了checked属性，默认处于选中状态。
常见问题说明
单选框无法互斥怎么办？
检查同组单选框的name属性是否完全一致，包括大小写，只要name值相同，浏览器就会自动处理互斥逻辑。如果name不同，就会被识别为不同组的单选框，允许同时选中。
如何让单选复选框默认选中？
只需要在对应的<input>标签中添加checked属性即可，不需要赋值，添加该属性就代表默认选中。如果需要动态控制默认选中，可以通过JavaScript修改元素的checked属性值为true或false。
提交表单时没获取到选中的值？
首先确认是否设置了value属性，没有设置value的话，选中后提交的值为on，部分后端处理逻辑可能会忽略该值。其次检查表单的action和method是否正确，确保表单提交路径无误。
简单的样式修改示例
默认的单选复选框样式比较单一，可以通过CSS简单调整外观，以下是基础样式修改示例：
/* 调整单选复选框的外边距 */
input[type="radio"], input[type="checkbox"] {
margin-right: 6px;
margin-left: 10px;
}
/* 调整label的字体样式 */
label {
font-size: 14px;
color: #333;
cursor: pointer;
}
/* 表单整体样式 */
form {
padding: 20px;
border: 1px solid #eee;
width: 300px;
}上述CSS代码调整了单选复选框的间距，设置了label的鼠标悬浮样式，同时给表单添加了边框和内边距，让表单看起来更规整。