jquery实现复选框的全选、全不选、反选
程序员文章站
2022-06-18 17:36:23
jQuery 选择喜欢的运动全选 篮球 足球 羽毛球 冰棒球 全选 全不选 反选 ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
</style>
</head>
<body>
选择喜欢的运动<input type="checkbox">全选
<br/>
<input type="checkbox" class="item">篮球
<input type="checkbox" class="item">足球
<input type="checkbox" class="item">羽毛球
<input type="checkbox" class="item">冰棒球
<br/>
<button id="selectAll">全选</button>
<button id="notSelect">全不选</button>
<button id="reverseSelect">反选</button>
<script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
var $lis=$("[type=checkbox]:first")
var $items=$(".item");
$("#selectAll").click(function(){
$items.prop("checked",true);
$lis.prop("checked",true);
});
$("#notSelect").click(function(){
$items.prop("checked",false);
$lis.prop("checked",false);
});
$("#reverseSelect").click(function(){
$items.each(function(){
this.checked=!this.checked;
});
$lis.prop("checked",$items.not(":checked").length===0)
});
$lis.click(function(){
$items.prop("checked",this.checked);
})
$items.click(function(){
$lis.prop("checked",$items.not(":checked").length===0)
})
</script>
</body>
</html>