获取checkbox选中的值
时间: 2023-07-24 21:54:54 浏览: 69
获取checkbox选中的值可以通过以下步骤实现:
1. 获取所有的checkbox元素
2. 遍历checkbox元素,判断哪些被选中
3. 将选中的checkbox的值存储到一个数组中
以下是一个示例代码:
```html
<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange
<button onclick="getSelectedValues()">Get selected values</button>
<script>
function getSelectedValues() {
var checkboxes = document.getElementsByName("fruit");
var selectedValues = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedValues.push(checkboxes[i].value);
}
}
console.log(selectedValues);
}
</script>
```
在上面的示例中,当用户点击按钮时,会调用`getSelectedValues`函数,该函数会获取所有名为`fruit`的checkbox元素,并遍历这些元素,将选中的值存储到`selectedValues`数组中,最后打印出该数组。
相关推荐
![](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)