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中的var_dump函数实现代码
Sep 07 Javascript
js自定义事件代码说明
Jan 31 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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中将网页导出为Word文档的代码
2012/05/25 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
js数组的操作详解
2013/03/27 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
Three.js学习之网格
2016/08/10 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
Django URL传递参数的方法总结
2016/08/28 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python实现自动登录
2018/09/17 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
2014年后勤工作总结
2014/11/18 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
实习单位意见
2015/06/04 职场文书
民主生活会主持词
2015/07/01 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
学习nginx基础知识
2021/09/04 Servers
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL