jQuery实现全选、全不选、反选

如图,需要使用jQuery实现全选、全不选、反选功能:

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>
上一篇:swift 资料


下一篇:C51 的编程规范