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 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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常用image图像函数集
2013/06/24 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
Prototype Array对象 学习
2009/07/19 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
详解javascript函数的参数
2015/11/10 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python对列表的操作知识点详解
2019/08/20 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
shallow copy和deep copy的区别
2016/05/09 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
大学生求职自我评价
2014/01/16 职场文书
企业文化演讲稿
2014/05/20 职场文书
法人授权委托书范本
2014/09/17 职场文书
单位租房协议书样本
2014/10/30 职场文书