<!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>