javascript get checkbox checked value

javascript如何获取checkbox被选中的值

预备知识

javascript dom 常用方法

方法名 描述 例子
document.getElementById 返回给定id属性值的元素节点相对应的对象
document.getElementsByTagName 返回给定name属性的元素节点对应的元素集合 var hobbies = document.getElementsByName(“hobbies”);
element.nextSibling 返回该元素紧跟的一个节点
nodeValue 获取节点中的文本值 ,例如:跑步 跑步

数组常用方法:

方法 或者 属性 说明 例子
arrayObject.length 属性:数组长度
arrayObject.push() 向数组末尾添加一个或多个元素 var arr = new Array(3)
arr[0] = “George”
arr[1] = “John”
arr[2] = “Thomas”

页面如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript获取复选框值方法</title>
</head>

<body>
<p>
<input type="checkbox" name="hobbies" id="hobbies" class="hobbies" value="1">游泳
<input type="checkbox" name="hobbies" id="hobbies" class="hobbies" value="2">跑步
</p>

<p>
<button id="btn1">获取复选框值</button>
</p>
</body>

</html>

方法一

通过复选框的name属性,遍历后将被选中的复选框的值输出

checkbox[index].nextSibling.nodeValue: 获取的是checkbox中标签包裹的文本值

1
2
3
4
5
6
7
8
9
function get_checkbox_val() {
var hobbies = document.getElementsByName("hobbies");
for (let index = 0; index < hobbies.length; index++) {
if (hobbies[index].checked) {
alert(hobbies[index].value + "," + hobbies[index].nextSibling.nodeValue);
}

}
}

方法二

建立一个数组,使用push方法将被选中的元素保存到数组

1
2
3
4
5
6
7
8
9
function get_checkbox_val_with_array() {
var arr = [];
for (let index = 0; index < hobbies.length; index++) {
if (hobbies[index].checked) {
arr.push(hobbies[index].value);
}
}
alert(arr);
}

方法三

通过class选择器 获取被选中的复选框的值

1
2
3
4
5
6
7
8
9
function get_checkbox_val_with_selector() {
var hobbies = document.getElementsByClassName('hobbies');
for (let index = 0; index < hobbies.length; index++) {
if (hobbies[index].checked) {
checkedValue = hobbies[index].value;
alert(hobbies[index].value + "," + hobbies[index].nextSibling.nodeValue);
}
}
}

使用jquery

需要引入jquery,这里我使用国内的cdn

jquery中通过each() 方法遍历所有被选中的复选框的值

1
2
3
4
5
6
7
8
9
10
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#btn1').click(function () {
$("input[name='hobbies']:checked").each(function () {
alert($(this).val());
});
});
</script>

</script>

==tips== :

  • $(“input[name=’xxxx’]:checked”) 被选中的复选框对象集合
坚持原创技术分享,您的支持将鼓励我继续创作!