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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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
2006/12/14 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP单链表的实现代码
2016/07/05 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
js性能优化技巧
2015/11/29 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python爬取微信公众号文章
2018/08/31 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python能在浏览器能运行吗
2020/06/17 Python
Python 列表反转显示的四种方法
2020/11/16 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
自荐信不宜过于夸大
2013/11/06 职场文书
大学军训自我鉴定
2013/12/15 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
教师党员个人总结
2015/02/10 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
鉴史问廉观后感
2015/06/10 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL