javascript实现多选框的方法

发布时间：2020-06-26 12:32:36 阅读：422 作者：Leah 栏目：开发技术

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章运用简单易懂的例子给大家介绍javascript实现多选框的方法，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

javascript实现多选框的方法

多选时：

javascript实现多选框的方法

全选时：

javascript实现多选框的方法

反选时：

javascript实现多选框的方法

html代码

<div class="container">
 <h4>请选择你最喜欢吃的水果（多选）</h4>
 <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><input type="checkbox">龙眼</li>
 </ul>
 <div class="checkinAll">
  <input type="checkbox" id="checkAll">全选/非全选
  <input type="checkbox" id="checkTurn">反选
 </div>
</div>

CSS代码：

*{
  margin: 0;
  padding: 0;
}
.container{
  width: 300px;
  /* height: 500px; */
  /* border: 1px solid black; */
  margin: 10px auto;
}
.container ul{
  list-style: none;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #666;
  border-radius: 10px;
  margin-bottom: 10px;
}
.container ul li{
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #666;
  line-height: 70px;
  text-indent: 50px;
  font-size: 16px;
  font-weight: 600;
  
}
.container ul li:last-child{
  border-radius: 0 0 11px 11px;
  border: none;
}
.container ul li:first-child{
  border-radius: 11px 11px 0 0;
   /* border: none; */
 }
input[type='checkbox']{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  border: 1px solid #666;
  border-radius: 3px;
}
input[type='checkbox']:checked{
  background-image: url(./select.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  outline: none;
}
ul input{
  margin-right: 40px;
}

JS代码：

(function(){
  const list_node = document.getElementsByTagName('li');
  const ul_node = document.getElementsByTagName('ul')[0]
  const colorArr = ['rgb(255,235,205)','rgb(255,240,245)','rgb(255,211,155)'];
  const check_nodes = ul_node.getElementsByTagName('input');
  const checkAll = document.getElementById('checkAll');
  const checkTurn = document.getElementById('checkTurn')
  for(let i = 0; i < list_node.length; i++){
    list_node[i].style.backgroundColor = colorArr[i % colorArr.length];
    list_node[i].addEventListener('click',clickFn);
  }
  function clickFn(e){
    console.log(e.target.tagName);
    let num = 0;
   if(e.target.tagName == 'INPUT' && e.target.checked == false){
     checkAll.checked = false;
   }else{
    for (let i = 0; i < check_nodes.length; i++) {
      if(check_nodes[i].checked == true){
        num++;
      }
      
    }
    if(num == check_nodes.length){
      checkAll.checked = true;
    }
   }
  }
  //全选/非全选
  checkAll.onclick = function(){
    if(this.checked == true){
      for (let i = 0; i < check_nodes.length; i++) {
        check_nodes[i].checked = true;
        
      }
    }else{
      for (let i = 0; i < check_nodes.length; i++) {
        check_nodes[i].checked = false;
        
      }
    }
  }
  //反选
  checkTurn.onclick = function(){
    let count = 0;
    let num = 0;
    for (let i = 0; i < check_nodes.length; i++) {
      if(check_nodes[i].checked == true){
      check_nodes[i].checked = false;
      count ++;
      }else{
      check_nodes[i].checked = true;
      num++;
      }
      
    }
    if(count == check_nodes.length){
      checkAll.checked = false;
    }else if(num == check_nodes.length){
      checkAll.checked = true;
    }
  }
})()

关于javascript实现多选框的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

javascript实现多选框的方法

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签