如何实现点击单选框文本即可选中对应radio按钮？

开发者阿泽

2026-7-7

实现点击单选框文本选中对应按钮的方法

刚学HTML的话，有两种简单方法能实现点击文本就选中对应单选框：

方法一：用<label>的for属性关联单选框
给单选框设置一个唯一的id，然后让<label>标签的for属性值和这个id完全一致，这样点击<label>里的文本就会触发单选框的选中状态。
代码示例：
```
<input type="radio" id="random-option">
<label for="random-option">Random input</label>
```
注意：同一个页面里的id不能重复，不然关联会出错。
方法二：把单选框嵌套在<label>内部
这种方法更简洁，不需要设置id和for，直接把单选框放在<label>标签里面，点击标签内的任何区域（包括文本）都会选中单选框。
代码示例：
```
<label>
  <input type="radio">
  Random input
</label>
```