<!-- author：青芒 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选/全选/反选 获取选中的值</title>
</head>
<body>
<p>中国古代十大名剑</p>
<input type="checkbox" value="全选" id="selectAll"/>全选
<div id="checkBoxList" class="check-all">
<input type="checkbox" value="轩辕"/>轩辕<br>
<input type="checkbox" value="湛泸"/>湛泸<br>
<input type="checkbox" value="赤霄"/>赤霄<br>
<input type="checkbox" value="太阿"/>太阿<br>
<input type="checkbox" value="七星龙渊"/>七星龙渊<br>
<input type="checkbox" value="干将"/>干将<br>
<input type="checkbox" value="莫邪"/>莫邪<br>
<input type="checkbox" value="鱼肠"/>鱼肠<br>
<input type="checkbox" value="纯钧"/>纯钧<br>
<input type="checkbox" value="承影"/>承影<br>
</div>
<button id="getCheckVal">获取选中的值</button>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
$("#selectAll").click(function(){ //全选/反选
var checkedFlag = this.checked;
$("#checkBoxList :checkbox").prop("checked", checkedFlag);
});
$("#checkBoxList :checkbox").click(function(){
var length1 = $("#checkBoxList :checkbox").length; //选项个数
var length2 = $("#checkBoxList :checkbox").filter(":checked").length; //已勾选的个数
if(length1 === length2){
$("#selectAll").prop("checked", true);
}else{
$("#selectAll").prop("checked", false);
}
});
$("#getCheckVal").click(function(){ //获取选中的值
$("#checkBoxList input:checkbox:checked").each(function(){
console.log($(this).val());
})
})
})
</script>
</body>
</html>