注：需要 jquery 作者用的：jquery-3.5.1.min.js
指导老师：闫英杰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选</title>
<script src="./jquery-3.5.1.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
color: #fff;
background-color: lightseagreen;
display: inline-block;
width: 70px;
height: 35px;
text-align: center;
line-height: 35px;
border-radius: 10px;
}
.items {
width: 320px;
height: 450px;
border: 1px solid #123abc;
margin: 0 auto;
padding-left: 10px;
}
.items p {
margin: 15px 0px;
}
.items li {
list-style: none;
margin-left: 10px;
height: 35px;
}
</style>
</head>
<body>
<div class="items">
<p>游戏列表</p>
<ul>
<li>
<input type="checkbox"> 英雄联盟
</li>
<li>
<input type="checkbox"> 王者荣耀
</li>
<li>
<input type="checkbox"> 和平精英
</li>
<li>
<input type="checkbox"> 开心消消乐
</li>
<li>
<input type="checkbox"> 红色警戒
</li>
<li>
<a href="#" class="selectAll">全选</a>
<a href="#" class="unselect">反选</a>
<a href="#" class="unselectAll">全不选</a>
</li>
</ul>
</div>
<script>
//全选
$(function() {
$(".selectAll").click(function() {
$(":checkbox").prop('checked', true)
})
//全不选
$(".unselectAll").click(function() {
$(":checkbox").prop('checked', false)
})
//反选
$(".unselect").click(function() {
$(":checkbox").each(function() {
$(this).prop('checked', !$(this).prop('checked'))
})
})
})
</script>
</body>
</html>
指导老师：闫英杰
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
