上一篇
HTML中，单选框通过`
标签设置，需为同组单选框设置相同的name`属性，以确保互斥选择。
HTML中，单选框（Radio Button）是一种常用的表单元素，用于让用户从多个选项中选择一个，以下是关于如何在HTML中设置单选框的详细指南，包括基本用法、属性设置、样式定制以及常见问题解答。
基本结构
单选框的基本结构由<input>标签和与之关联的<label>标签组成，单选框的type属性设置为radio，并通过name属性将多个单选框分组,确保同一组中的单选框只能选择一个。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">单选框示例</title>
</head>
<body>
<form>
<fieldset>
<legend>请选择您的性别：</legend>
<label>
<input type="radio" name="gender" value="male">
男
</label><br>
<label>
<input type="radio" name="gender" value="female">
女
</label><br>
<label>
<input type="radio" name="gender" value="other">
其他
</label>
</fieldset>
</form>
</body>
</html>
说明：
type="radio"：定义输入类型为单选框。name="gender"：将单选框分组,同名的单选框属于同一组。value：提交表单时传递的值。<label>：提高可点击区域,关联对应的单选框。
常用属性
-
checked：设置默认选中的单选框。
<input type="radio" name="gender" value="male" checked> 男
-
disabled：禁用单选框,用户无法选择。
<input type="radio" name="gender" value="female" disabled> 女
-
required：使单选框成为必选项,用户必须选择其中一个。
<fieldset required> <legend>请选择您的性别：</legend> ... </fieldset>
样式定制
虽然单选框的样式主要由操作系统和浏览器控制,但可以通过CSS进行一定程度的定制。
-
隐藏单选框，使用自定义样式：
<style> / 隐藏默认单选框 / input[type="radio"] { display: none; } / 自定义标签样式 / label { display: inline-block; padding: 10px; background-color: #f0f0f0; border: 2px solid #ccc; border-radius: 5px; cursor: pointer; } / 选中状态样式 / input[type="radio"]:checked + label { background-color: #ffeb3b; border-color: #ffc107; } </style> <label> <input type="radio" name="gender" value="male" checked> 男 </label> <label> <input type="radio" name="gender" value="female"> 女 </label> <label> <input type="radio" name="gender" value="other"> 其他 </label> -
使用伪类调整样式：
input[type="radio"]:hover + label { background-color: #e0e0e0; }
JavaScript交互
通过JavaScript，可以动态操作单选框，如检查选中状态、添加事件监听等。
-
检查选中状态：
const radios = document.getElementsByName('gender'); for (const radio of radios) { if (radio.checked) { console.log('选中的性别是：' + radio.value); } } -
添加事件监听：
document.querySelectorAll('input[name="gender"]').forEach(function(radio) { radio.addEventListener('change', function() { if (this.checked) { alert('您选择了：' + this.value); } }); });
表格形式展示单选框
有时为了布局整齐，可以将单选框放在表格中,创建一个调查问卷：
<table border="1">
<tr>
<th>问题</th>
<th>选项A</th>
<th>选项B</th>
</tr>
<tr>
<td>您喜欢哪种颜色？</td>
<td>
<label>
<input type="radio" name="color" value="red"> 红色
</label>
</td>
<td>
<label>
<input type="radio" name="color" value="blue"> 蓝色
</label>
</td>
</tr>
</table>
无障碍考虑
为了确保单选框对所有用户友好，包括使用辅助技术的用户,应注意以下几点：
- 使用
<label>：确保每个单选框都有对应的标签，并正确关联（通过for属性或包裹<input>）。 - 提供清晰的标签文本：标签文本应简洁明了,描述对应选项的含义。
- 键盘导航：确保用户可以通过Tab键在单选框之间切换,并通过空格键进行选择。
常见问题及解决方案
单选框无法正常工作，可以多选？
原因：同一组单选框的name属性不一致,导致它们不属于同一组。
解决方案：确保所有需要互斥的单选框具有相同的name属性。
<!-错误示例 -->
<input type="radio" name="gender1" value="male"> 男
<input type="radio" name="gender2" value="female"> 女
<!-正确示例 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
如何设置单选框的默认选中项？
方法：在需要默认选中的单选框上添加checked属性。
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
FAQs
Q1：如何通过JavaScript获取选中的单选框的值？
A1：可以使用以下代码获取选中的单选框的值：
const selectedValue = document.querySelector('input[name="gender"]:checked').value;
console.log('选中的值是：' + selectedValue); Q2：单选框和复选框有什么区别？
A2：单选框（Radio Button）用于让用户从多个选项中选择一个,同一组中的单选框互相排斥；
