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 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
layui select动态添加option的实例
Mar 07 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
js+html实现周岁年龄计算器
Jun 25 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下MYSQL limit的优化
2008/01/10 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
python万年历实现代码 含运行结果
2017/05/20 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python进行文件对比的方法
2018/12/24 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
销售人员获奖感言
2014/02/05 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
学生检讨书范文
2015/01/27 职场文书
检讨书格式
2015/05/07 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python