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对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
js编写的treeview使用方法
Nov 11 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
小程序实现投票进度条
Nov 20 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代码
2011/11/27 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python发送Email方法实例
2014/08/21 Python
python操作CouchDB的方法
2014/10/08 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python json读写方式和字典相互转化
2020/04/18 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
用python发送微信消息
2020/12/21 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
中专生自我鉴定
2013/12/17 职场文书
小区消防演习方案
2014/02/21 职场文书
公开承诺书格式
2014/05/21 职场文书
五一活动标语
2014/06/30 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
廉洁自律个人总结
2015/02/14 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL
Flink 侧流输出源码示例解析
2022/09/23 Servers