进行全选\全不选 全选 反选的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
$("#checkedallbtn").click(function () { //全选
$(":checkbox").prop("checked", true);
})
$("#checkednotbtn").click(function () { //全不选
$(":checkbox").prop("checked", false);
})
$("#checkedfanbtn").click(function () { //反选
$(":checkbox[name='items']").each(function () {
this.checked = !this.checked; //代码简化
});
//在反选之后判断是否选满
var allqiu = $(":checkbox[name='items']").length;
var checkedqiu = $(":checkbox[name='items']:checked").length;
if (allqiu == checkedqiu) {
$("#checkedall").prop("checked", true);
} else {
$("#checkedall").prop("checked", false);
}
// $("#checkedall").prop("checked",allqiu == checkedqiu);
})
$(":checkbox[name='items']").click(function () { //在每个复选框选了之后判断是否选满
var allqiu = $(":checkbox[name='items']").length;
var checkedqiu = $(":checkbox[name='items']:checked").length;
$("#checkedall").prop("checked", allqiu == checkedqiu);
})
$("#sub").click(function () {
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
})
})
$("#checkedall").click(function () {
$(":checkbox").prop("checked", this.checked);
})
})
</script>
</head>
<body>
你爱好的运动是？<input type="checkbox" id="checkedall">全选/全不选<br>
<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="篮球">篮球<input type="checkbox"name="items">羽毛球<input
type="checkbox" name="items">乒乓球<br>
<button id="checkedallbtn">全选</button>
<button id="checkednotbtn">全不选</button>
<button id="checkedfanbtn">反选</button>
<button id="sub">提交</button>
</body>
</html>
