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;
    }
  }
})()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 用原生JS实现简单的多选框功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <

  • AngularJS 单选框及多选框的双向动态绑定

    AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu

  • html+javascript+bootstrap实现层级多选框全层全选和多选功能

    想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里, 查到这文,非常详细,如果大家需要做前面所说的功能,可以参考这个地址,http://mrthink.net/jquery-plugin-iselecttags/ 但是,考虑到如果要做一个选项数不确定.可能非常多,用标签会容易视觉疲劳,同时要求随着选项数的变化,最小程度影响网页布局和效果,于是选择用层级的多选框,也就是设置电脑的那种常见效果.第二层选项可以折叠/展开到第一层下面,用bootstrap的 data-

  • JavaScript判断表单中多选框checkbox选中个数的方法

    本文实例讲述了JavaScript判断表单中多选框checkbox选中个数的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript检测并判断出表单中多选框的选中个数,也就是checkbox被选择了多少,在以前,这个问题经常被各大论坛问到,因为检测checkbox不像检测输入框那么简单,尤其是判断个数也经常会遇到,所以说觉得这个Js代码还是很有用的,大家有兴趣的再完善一下. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ch

  • ExtJS Grid使用SimpleStore、多选框的方法

    复制代码 代码如下: ///<reference path="./vswd-ext_2.0.2.js" /> Ext.onReady(function(){ var data = [ [1,"wilson.fu",10], [2,"wilson.fu2",20], [3,"wilson.fu3",30] ]; var sqldata = new Array() ; for(var i=0;i<10;i++)

  • AngularJS单选框及多选框实现双向动态绑定

    在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

  • 用 Javascript 验证表单(form)中多选框(checkbox)值

    本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用. 复制代码 代码如下: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit function getCheckboxValue(checkbox) { if (!checkbox.length && checkbox.type.toLowerCase(

  • 兼容ie和firefox版本的js反选 全选 多选框

    朋友们说不兼容.昨天晚上回去调试了一个兼容版本: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <script language="javascript"> function selectIt(action){     var testform=document.g

  • ExtJS 下拉多选框lovcombo

    开始以为很简单,在option里加个input checkbox就行了.哪知行不通,网上搜了一些实现方法,主要是用div层来模拟下拉.本想照着这种思路,再结合这个项目具体应用自己写一个,发现太麻烦了.刚好在另外一个项目中使用extjs,找到了一个扩展lovcombo,学习了一下它自带的例子(配合2.3版的extjs,3.x版的貌似有问题).例子倒不难,关键是要把它添加到现有的代码中,并且尽量少的改动原有代码. 下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事

  • javascript 单选框,多选框美化代码

    crir = {     init: function() {         arrLabels = document.getElementsByTagName('label'); searchLabels:         for (var i=0; i<arrLabels.length; i++) {                         // get the input element based on the for attribute of the label tag   

随机推荐