jQuery实现的全选、反选和不选功能

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jquery中的map()方法</title>
		<script src="../../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<script type="text/javascript">
		$(document).ready(function(){
			$("input:checkbox[name=number]").click(function(){
				// 第一种方式
				// 判断sub复选框是否被选中:如有一个未被选中，那么不选all复选框
				if(!$("input:checkbox[name=number]").checked){
					$("input:checkbox[name=all]").attr("checked",false);
				}
				// 获取页面sub复选框的个数
				var all = $("input:checkbox[name=number]").length;
				// 获取页面all选中复选框的个人
				var sub = $("input:checkbox[name=number]:checked").length;
				// 判断是否等值sub==all
				if(all===sub){
					var all = $("input:checkbox[name=all]").attr("checked",true);
				}
				
				/*// 第二种方式
				// 获取没选中的复选框
				var all = $("input:checkbox[name=number]").map(function(){
					return $(this).val();
				}).get().join(",");
				// 获取已选中的复选框
				var sig = $('input:checkbox[name=number]:checked').map(function(){
					return $(this).val();
				}).get().join(",");
				// 判断是否等值
				if(sig.length===all.length){
					$("#all").prop("checked",true);
				}else{
					$("input:checkbox[name=all]").prop("checked",false);
				}*/
			});
			// 复选框全选和反选
			$("#all").click(function(){
				if($("#all").is(":checked")===true){
					$("input[name=number]").prop("checked",true);
				}else{
					$("input[name=number]").prop("checked",false);
				}
			});
			$("#btn").click(function(){
				alert(all);
				alert(sig);
			});
		});
	</script>

	<body>
		<form method="post" action="">
			<fieldset>
				<div> 
					A<label for="two"></label>
					<input type="checkbox" value="2" id="all" name="all">
					<hr />
				</div>
				<div>
					<label for="four">4</label>
					<input type="checkbox" value="4" id="four" name="number">
				</div>
				<div>
					<label for="six">6</label>
					<input type="checkbox" value="6" id="six" name="number">
				</div>
				<div>
					<label for="eight">8</label>
					<input type="checkbox" value="8" id="eight" name="number">
				</div>
			</fieldset>
			<input type="button" id="btn" value="click" />
		</form>
	</body>

</html>

1)js自带map方法

语法：array.map(callback,[ thisObject]);
用法：map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
这里的map不是“地图”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法类似
简单说：类同于foreach的功能；遍历数据中的元素；
等同于：$.map(array, function(n){return n;}).join();

2）jquery中的map()方法
语法：.map(callback(index,domElement))
用法：map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
注释：由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单。