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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
Vue.js添加组件操作示例
Jun 13 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
vue项目接口域名动态获取操作
Aug 13 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
PHP集成FCK的函数代码
2008/09/27 PHP
php array_search() 函数使用
2010/04/13 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP 微信支付类 demo
2015/11/30 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
nginx下安装php7+php5
2016/07/31 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
selenium3+python3环境搭建教程图解
2018/12/07 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
应届毕业生求职信
2013/11/30 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
《太阳》教学反思
2014/02/21 职场文书
个人求职自荐信范文
2014/06/20 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript