多个radio实现单选
时间: 2023-10-20 10:21:51 浏览: 55
多个 Radio 单选框可以通过将它们的 `name` 属性设置为相同的值来实现单选。这样,只有一个单选框可以被选中。
例如:
```html
<form>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">Apple</label>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">Orange</label>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">Banana</label>
</form>
```
在这个例子中,三个 Radio 单选框的 `name` 属性都设置为 "fruit",所以只有其中一个单选框可以被选中。
如果你想让用户可以取消选中的单选框,可以在其中一个单选框前添加一个额外的 "取消选择" 选项,它的值可以为 null 或者一个特殊的值。这样,当用户选择 "取消选择" 时,所有的单选框都会取消选中状态。
例如:
```html
<form>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">Apple</label>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">Orange</label>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">Banana</label>
<input type="radio" name="fruit" value="" id="none">
<label for="none">Cancel selection</label>
</form>
```
这个例子中,新增了一个 `value` 为空字符串的单选框 "Cancel selection"。当用户选择这个单选框时,所有的单选框都会取消选中状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)