自定义反选全选复选框

2022-03-28 本文已影响0人心存美好

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}

body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ol,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  border: none;
}

#wrap {
  width: 300px;
  padding-top: 20px;
  border: 1px solid #bbb;
  border-radius: 15px;
  margin: 50px auto;
  user-select: none;
}

#wrap ul.list li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  text-indent: 70px;
  cursor: pointer;
  color: #fff;
  background: url("img/ckbg1.jpg") no-repeat 20px center;
}

#wrap ul.list li.click {
  background-image: url('img/ckbg2.jpg')
}

#wrap .btn {
  overflow: hidden;
  width: 100%;
  height: 50px;
}

#wrap .btn p {
  float: left;
  line-height: 50px;
  margin-left: 50px;
  background: url("img/ckbg1.jpg") no-repeat 0 center;
  text-indent: 23px;
  font-size: 14px;
  cursor: pointer;
}

#wrap .btn p.click {
  background-image: url("img/ckbg2.jpg");
}

#wrap .btn p.fan {
  background-image: none;
}

</style>
</head>

// 获取元素(元素的变量)
let oUl = document.querySelector('#wrap .list');
let aLi = oUl.getElementsByTagName('li')//页面加了内容才有li，所以用get动态获取
let oAll = document.querySelector('#wrap .btn .all');
let oFan = document.querySelector('#wrap .btn .fan')
//定义变量
let len = data.length;
let num = 0//记录选中的个数

//循环添加数据
let html = '';
let color = ['#222', '#555', '#888', '#bbb'];
let colorlen = color.length;
data.forEach((item, index) => {
  html += `<li style="background-color:${color[index % colorlen]}">${item.txt}</li>`
})
oUl.innerHTML = html;

//li绑定事件
// for(let i=0;i<len;i++){
//   aLi[i].onclick =function(){
//   this.classList.toggle('click')//切换类名  toggle 删除/添加功能
// }}
//也可以forEach写法
[...aLi].forEach((oLi, index) => {
  oLi.onclick = function () {
    this.classList.toggle('click')//切换类名  toggle 删除/添加功能
    //  if(this.classList.contains('click')){//contains判断元素是具有某个类名,有增加，删除减少
    //     num++
    //  } else{
    //    num--
    //  }
    this.classList.contains('click') ? num++ : num--//contains判断元素是具有某个类名,有增加，删除减少
    ifFullNum();
  }
})
//只要技术num发生变化就会触发这个函数
function ifFullNum() {
  if (num == len) {
    oAll.classList.add('click')
  } else {
    oAll.classList.remove('click')   //对象属性可以打点调用，也可中括号字符串调用,[]中可以写表达式。 oAll.classList['remove']
  }
  // oAll.classList[num==len ? 'add' :'remove']('click') //三目优化写法
}
// 点击全选
oAll.onclick = function () {
  this.classList.toggle('click');  //切换
  //根据oAll元素是否具有click类名，判断是否全选
  let bol = this.classList.contains('click');
  let attr = bol ? 'add' : 'remove';
  //循环添加类名
  [...aLi].forEach((oLi, index) => {
    oLi.classList[attr]('click');
  })
  num == bol ? len : 0;
}
//反选
oFan.onclick = function () {
  [...aLi].forEach((oLi, index) => {
    oLi.classList.toggle('click')
  })
  num = len - num;
  ifFullNum()

}

</script>
</body>

</html>

自定义反选全选复选框

猜你喜欢

热点阅读