如图,需要使用jQuery实现全选、全不选、反选功能:
核心代码:
全选
$("#check_all").click(function(){
$("input:checkbox").prop("checked",true);
});
全不选
$("#check_no").click(function(){
$("input:checkbox").prop("checked",false);
});
反选
$("#check_reverse").click(function(){
$("input:checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
全选/全不选
$("#check_switch").click(function(){
$("input:checkbox").is(":checked")?$("input:checkbox").prop("checked",false):$("input:checkbox").prop("checked",true);
});
全部代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
//全选
$("#check_all").click(function(){
$("input:checkbox").prop("checked",true);
}); //全不选
$("#check_no").click(function(){
$("input:checkbox").prop("checked",false);
}); //反选:使用了each(),针对每个操作
$("#check_reverse").click(function(){
$("input:checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}); //全选/全不选
$("#check_switch").click(function(){
$("input:checkbox").is(":checked")?$("input:checkbox").prop("checked",false):$("input:checkbox").prop("checked",true);
});
});
</script>
</head>
<body>
<ul>
<li><input type="checkbox">aa</li>
<li><input type="checkbox">bb</li>
<li><input type="checkbox">cc</li>
<li><input type="checkbox">dd</li>
<li><input type="checkbox">ee</li>
</ul>
<button id="check_all">全选</button>
<button id="check_no">全不选</button>
<button id="check_reverse">反选</button>
<button id="check_switch">全选/全不选</button>
</body>
</html>