javascript实现简单的全选和反选功能


Posted in Javascript onJanuary 05, 2016

本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下

效果图:

javascript实现简单的全选和反选功能

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全选反选</title>
</head>
<body>
  
  <input type="button" value="全选" id="all">
  <input type="button" value="反选" id="reverse">
  <input type="checkbox" id="flagCheck">
  <ul id="checkboxList">
    <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>
    <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>
  <p>
    布尔属性,只要name即可,值可为空
    checked,selected,readonly,disabled....
  </p>
  <script type="text/javascript">
  //1.找节点
  var allBtn = document.querySelectorAll("#all")[0];
  var reverseBtn = document.querySelector("#reverse");
  var flagCheck = document.getElementById("flagCheck");
  var checkList = document.querySelectorAll("#checkboxList input");
  function checkAll() {
    for(var j = 0; j < checkList.length; j++) {
      if(!checkList[j].checked) {
        break;
      }
    }
    if(j == checkList.length) {
      // alert("全部为真")
      flagCheck.checked = true;
    }else {
      // alert("至少一个不为真");
      flagCheck.checked = false;
    }
  }
  //2.加事件
  //全选
  allBtn.onclick = function() {
    if(flagCheck.checked) {
      flagCheck.checked = false;
      for(var i = 0; i < checkList.length; i++) {
        checkList[i].checked = false;
      }
    }else {
      flagCheck.checked = true;
      for(var i = 0; i < checkList.length; i++) {
        checkList[i].checked = true;
      }
    }
    
  }
  //反选
  reverseBtn.onclick = function() {
    for(var i = 0; i < checkList.length; i++) {
      if(checkList[i].checked) {
        checkList[i].checked = false;
      }else {
        checkList[i].checked = true;
      }
    }
    //执行检查所有checkList是否被选上了
    checkAll();
  }

  for(var i = 0; i < checkList.length; i++) {
    checkList[i].onclick = checkAll;
  }
  </script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
Javascript原型链的原理详解
Jan 05 #Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 #Javascript
基于javascript实现图片懒加载
Jan 05 #Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 #Javascript
基于javascript实现图片预加载
Jan 05 #Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 #Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 #Javascript
You might like
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
Java面试题:为什么要用Java
2012/05/11 面试题
应届大学生的推荐信
2013/11/20 职场文书
农村婚礼证婚词
2014/01/10 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
颁奖晚会主持词
2014/03/25 职场文书
激励员工的口号
2014/06/16 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
Javascript 解构赋值详情
2021/11/17 Javascript
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
python基础之//、/与%的区别详解
2022/06/10 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL