Checkbox 单选怎么实现
时间: 2024-05-11 20:20:16 浏览: 16
Checkbox 单选可以通过以下步骤实现:
1. 在 HTML 中,使用 input 标签,并将 type 属性设置为 "checkbox"。例如:
```html
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子
```
2. 为了实现单选,需要为每个 checkbox 设置相同的 name 属性。这样,它们就成为了同一组 checkbox。
3. 可以使用 JavaScript 监听 checkbox 的点击事件,当一个 checkbox 被选中时,取消其它 checkbox 的选中状态。例如:
```javascript
var checkboxes = document.getElementsByName("fruit");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', function() {
if (this.checked) {
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j] != this) {
checkboxes[j].checked = false;
}
}
}
});
}
```
以上代码会遍历所有的 checkbox,为其添加点击事件。当某个 checkbox 被选中时,会取消其它 checkbox 的选中状态。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)