Jquery系列-Jquery each的使用

最新推荐文章于 2020-07-30 11:26:28 发布

原创最新推荐文章于 2020-07-30 11:26:28 发布 · 846 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用jQuery简化处理复选框组的方法。通过监听复选框的点击事件，可以动态获取所有被选中的值，并将其展示出来。这种方法适用于需要收集用户从多个选项中进行选择的场景。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题页</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
	//each
	$(function(){
		$('input[name=names]').click(function(){
			var arr = new Array();
			$('input[name=names]:checked').each(function(key,value){
				arr[key]= $(value).val();
			});
			$('#msg').text(arr.length + arr.join(","));
		});
	});
</script>	
</head>
<body>

	<input type="checkbox" name="names" value="北京"/>背景 <br/>
	<input type="checkbox"  name="names" value="合肥"/>合肥 <br/>
	<input type="checkbox"  name="names" value="苏州"/>苏州 <br/>
	<input type="checkbox"  name="names" value="南京"/>南京 <br/>

	<div id="msg"></div>

	<input type="button" value="显示选中项"/> <br/>

</body>
</html>