js如何获取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” |
页面如下：
<!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中标签包裹的文本值
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 方法将被选中的元素保存到数组
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选择器 获取被选中的复选框的值
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() 方法遍历所有被选中的复选框的值
<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”) 被选中的复选框对象集合
原文：https://pinghailinfeng.gitee.io/2019/09/28/javascript-get-checkbox-checked-value/?utm_source=tuicool&utm_medium=referral
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！