html做一个判断用户选择了第几个radio的函数
时间: 2023-08-14 07:04:57 浏览: 47
可以通过以下方式实现:
1. 首先,获取所有的radio按钮元素,可以使用`document.getElementsByName()`方法来获取,传入参数为相同的name属性值,例如:
```
var radios = document.getElementsByName('gender');
```
2. 然后,遍历这些radio按钮,判断哪个被选中了,可以使用循环和`checked`属性来判断,例如:
```
function getSelectedRadio() {
var radios = document.getElementsByName('gender');
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return i + 1;
}
}
return -1; // 没有选中任何一个
}
```
3. 最后,将获取到的选中的radio按钮的索引值加1,即为用户选择的第几个radio。
完整代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>判断用户选择了第几个radio</title>
</head>
<body>
<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>
<label><input type="radio" name="gender">保密</label>
<button onclick="alert('你选择了第' + getSelectedRadio() + '个radio')">点击我</button>
<script type="text/javascript">
function getSelectedRadio() {
var radios = document.getElementsByName('gender');
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return i + 1;
}
}
return -1; // 没有选中任何一个
}
</script>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)