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事件冒泡,获取控件ID值
Jun 27 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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桌面中心(四) 数据显示
2007/03/11 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
mysql+php分页类(已测)
2008/03/31 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
document.write的几点使用心得
2014/05/14 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
socket + select 完成伪并发操作的实例
2017/08/15 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
基于python代码批量处理图片resize
2020/06/04 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
实习鉴定范文
2013/12/19 职场文书
历史学专业求职信
2014/06/19 职场文书
培训师岗位职责
2015/02/14 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Python类方法总结讲解
2021/07/26 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python