index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var checkbox = $('input[name=checkbox]');
$('.selectAll').on("click",function(){
checkbox.prop('checked', this.checked);
});
checkbox.on("click",function(){
var _tmp = checkbox;
$(".selectAll").prop('checked',_tmp.length == _tmp.filter(":checked").length);
});
//或者使用下述方法
// checkbox.on("click",function(){
// var flag = true;
// checkbox.each(function(){
// if (!this.checked) {
// flag = false;
// };
// })
// if (flag) {
// $('.selectAll').prop('checked', true)
// }else{
// $('.selectAll').prop('checked', false)
// }
// })
})
</script>
</head>
<body>
<input type="checkbox" class="selectAll">全选/全不选<br/>
<input type="checkbox" name="checkbox" /><br/>
<input type="checkbox" name="checkbox" /><br/>
<input type="checkbox" name="checkbox" /><br/>
<input type="checkbox" name="checkbox" /><br/>
<input type="checkbox" name="checkbox" /><br/>
<input type="checkbox" name="checkbox" /><br/>
</body>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8771.html