本文介绍了一种使用CSS和JS实现全选和反选效果的方法，包括HTML结构、CSS样式和JavaScript代码实现。通过点击全选和反选按钮，可以控制列表中的复选框状态。示例代码和源码下载链接已提供。
一.要实现的效果
1.全选/取消全选
2.反选
二.效果图
三.源码路径:
链接: https://pan.baidu.com/s/1qwrhF1xlmVp1rRqqJ4J0gQ 提取码: 6gh9
这个文件夹下的箭头标识的文件
四.源码
-----------------------------------------------------------------我是分割线----------------------------------------------------------
<!DOCTYPE html>
<html lang="ZH-cn">
<head>
<meta charset="UTF-8">
<title>复选框—单选-全选</title>
<link rel="stylesheet" href="./icon/checkbox/iconfont.css">
<style>
.box {
position: relative;
width: 250px;
height: 400px;
margin: 50px auto;
background-color: gray;
border: 2px solid darkmagenta;
overflow: hidden;
}
ul {
width: 100%;
height: 100%;
padding-left: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
}
ul li {
position: relative;
width: 100%;
height: 35px;
border-bottom: 1px solid rgba(0, 0, 0, .7);
cursor: pointer;
}
ul li span.iconfont {
display: inline-block;
font-size: 25px;
font-weight: 400;
line-height: 35px;
display: inline-block;
position: absolute;
color: orange;
left: 15px;
}
ul li span.icon-fuxuankuanggou {
display: none;
}
ul li span[class~="icon-fuxuankuanggou"].show {
display: inline-block;
}
ul li span.msg {
font-si
最低0.47元/天 解锁文章
扫一扫
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
