快速取出选中checkbox的值
原料：jquery
直接上代码
html代码
<html>
<head>
<title>$Title$</title>
</head>
<body>
<input type="checkbox" value="男">男<br/>
<input type="checkbox" value="女">女<br/>
<input type="checkbox" value="男1">男1<br/>
<input type="checkbox" value="女2">女2<br/>
<input type="checkbox" value="男3">男3<br/>
<input type="checkbox" value="女4">女4<br/>
<input type="button" id="btn" value="btn">
<script src="/assets/js/jquery1.12.4.js"></script>
</body>
</html>
script代码
<script>
$("#btn").click(function () {
var re = [];
$("body").find("input[type='checkbox']:checked").each(function() {re.push($(this).val());
})
console.log(re.join("/"));
});
;
</script>
实例：
结果：
另一种写法（编译器编辑 语法可能会变成红色的，不影响使用）
原料：css3的选择器
html代码
<html>
<head>
<title>$Title$</title>
</head>
<body>
<input type="checkbox" value="男">男<br/>
<input type="checkbox" value="女">女<br/>
<input type="checkbox" value="男1">男1<br/>
<input type="checkbox" value="女2">女2<br/>
<input type="checkbox" value="男3">男3<br/>
<input type="checkbox" value="女4">女4<br/>
<input type="button" onclick="box()" value="btn1" />
<script>
function box() {
var res = [];
document.querySelectorAll("body input:checked").forEach((e)=>{
if(e.checked){
res.push(e.value);
}
});
console.log(res.join("/"));
}
</script>
</body>
</html>
结果：
