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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
js密码强度检测
Jan 07 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
手机端转换rem适应
Apr 01 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
JavaScript forEach中return失效问题解决方案
Jun 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
PHP n个不重复的随机数生成代码
2009/06/23 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python解析html开发库pyquery使用方法
2014/02/07 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
综合素质的自我鉴定
2013/10/07 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015年营业员工作总结
2015/04/23 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python