JS/jQuery获取所有checkbox已选中的值

最新推荐文章于 2021-12-16 11:18:43 发布

原创最新推荐文章于 2021-12-16 11:18:43 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jQuery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何利用JavaScript（JS）和jQuery两种方式来获取网页中被选中的复选框的值。首先通过jQuery实现，接着展示纯JS的实现方法，并提供示例代码。适用于希望了解不同技术方案来收集表单数据的前端开发者。

一、使用jQuery

代码如下：

var array="";
$("input:checkbox[name='"+name+"']:checked").each(function(i){
if(0==i){
array=$(this).val();
}else{
array+=(","+$(this).val());
}
});
alert（array）;

二、使用JS

代码如下：

<input type="checkbox" name="color" id="" value="红">红
	<input type="checkbox" name="color" id="" value="黄">黄
	<input type="checkbox" name="color" id="" value="蓝">蓝
	<input type="checkbox" name="color" id="" value="绿">绿
	<hr>
	<input type="button" value="点击" id="but">
	<script>
	document.getElementById("but").onclick=function(){
		var ele=document.getElementsByName("color");
		var val="";
		for(var item of ele){
			(item.checked==true)&&(val+=item.value)
		}
		console.log(val);
	}
	</script>