一.要实现的效果
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-size: 16px;
font-weight: 400;
line-height: 35px;
display: inline-block;
position: absolute;
color: darkgreen;
left: 50px;
}
.box #chose {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 35px;
bottom: 20px;
}
.box #chose .button {
width: 80px;
height: 100%;
}
.box #chose .button .select {
position: relative;
width: 35px;
height: 35px;
float: left;
cursor: pointer;
}
.box #chose .button span.msg {
display: inline-block;
font-size: 16px;
line-height: 35px;
}
.box #chose .button .select span.iconfont {
position: absolute;
font-size: 25px;
font-weight: 400;
line-height: 35px;
position: absolute;
}
.box #chose .left span.icon-fuxuankuanggou {
display: none;
}
.box #chose .left span.icon-fuxuankuanggou.show {
display: inline-block;
}
.box #chose .right span.icon-fuxuankuanggou {
display: none;
}
.box #chose .right span.icon-fuxuankuanggou.show {
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
<li>
<div class="checkBox">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
<span class="msg">杨龙</span>
</div>
</li>
</ul>
<div id="chose">
<div class="button left">
<div class="select" id="select">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
</div>
<span class="msg">全选</span>
</div>
<div class="button right">
<div class="select" id="deselect">
<span class="iconfont icon-fuxuankuangkong"></span>
<span class="iconfont icon-fuxuankuanggou"></span>
</div>
<span class="msg">反选</span>
</div>
</div>
</div>
<script>
//全选
function selectAll() {
for (let i = 0; i < oCheckBox.length; i++) {
spanArr[i] = 1
}
}
//取消全选
function deSelectAll() {
for (let i = 0; i < oCheckBox.length; i++) {
spanArr[i] = 0
}
}
//反选
function inverse() {
for (let i = 0; i < oCheckBox.length; i++) {
spanArr[i] = spanArr[i]?0:1;
}
}
function show(){
for (let i = 0; i < oCheckBox.length; i++) {
spanArr[i]?oSpanGou[i].classList.add("show"):oSpanGou[i].classList.remove("show");
}
}
var oCheckBox = document.querySelectorAll("ul li .checkBox"),
oSpanGou = document.querySelectorAll("ul li span.icon-fuxuankuanggou"),
oButtonLeft = document.querySelector(".box #chose .left"),//全选按钮
oButtonRight = document.querySelector(".box #chose .right"),//全选按钮
oSelectAll = document.querySelector(".box #chose .left span.icon-fuxuankuanggou"),//全选按钮的勾
oInverse = document.querySelector(".box #chose .right span.icon-fuxuankuanggou"),//反选按钮的勾
spanArr = [],//保存列表中checkBox的状态
leftStatus = 0,
rightStatus = 0;
len = oCheckBox.length
for (let i = 0; i < len; i++) {
//勾选列表中的checkBox
oCheckBox[i].onclick = function () {
spanArr[i] = spanArr[i]?0:1;
show()
console.log(spanArr);
}
}
//点击全选按钮
oButtonLeft.onclick = function () {
if (leftStatus) {
leftStatus = 0
deSelectAll()
oSelectAll.classList.remove("show")
} else {
leftStatus = 1
oSelectAll.classList.add("show")
selectAll()
}
show()
console.log(spanArr);
}
//点击反选按钮
oButtonRight.onclick = function () {
if (rightStatus) {
rightStatus = 0
oInverse.classList.remove("show")
} else {
rightStatus = 1
oInverse.classList.add("show")
}
inverse()
show()
console.log(spanArr);
}
</script>
</body>
</html>
-----------------------------------------------------------------我是分割线----------------------------------------------------------