JS实现多选框的操作


Posted in Javascript onJune 24, 2020

本文实例为大家分享了JS实现多选框的具体代码,供大家参考,具体内容如下

JS实现多选框的操作

多选时:

JS实现多选框的操作

全选时:

JS实现多选框的操作

反选时:

JS实现多选框的操作

html代码

<div class="container">
 <h3>请选择你最喜欢吃的水果(多选)</h3>
 <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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 #Javascript
JavaScript实现答题评分功能页面
Jun 24 #Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 #Javascript
JS实现简单打字测试
Jun 24 #Javascript
微信小程序实现多选框功能的实例代码
Jun 24 #Javascript
JS实现电脑虚拟键盘的操作
Jun 24 #Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 #Javascript
You might like
FCKeditor添加自定义按钮
2008/03/27 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
用jQuery实现抽奖程序
2020/04/12 jQuery
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
Python守护进程用法实例分析
2015/06/04 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Windows下安装Scrapy
2018/10/17 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python字符串判断密码强弱
2020/03/18 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
python 星号(*)的多种用途
2020/09/21 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
转党组织关系介绍信
2014/01/08 职场文书
致百米运动员广播稿
2014/01/29 职场文书
人事专员工作职责
2014/02/22 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
网络妈妈观后感
2015/06/08 职场文书
新店开张宣传语
2015/07/13 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python