JS实现的全选、全不选及反选功能【案例】


Posted in Javascript onFebruary 19, 2019

本文实例讲述了JS实现的全选、全不选及反选功能。分享给大家供大家参考,具体如下:

效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.

JS实现的全选、全不选及反选功能【案例】

html结构代码:

<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">

javascript代码如下: 

<script>
  /*一:需求分析:
      (1)点击全选:选中所有选择框(设置checked属性为true)
      (2)点击全不选:不选中所有选择框(设置checked属性为false)
      (3)点击反选:让每一个选择框的checked属性与自身相反
    二:思路分析
        1.获取元素
        2.注册事件
        3.事件处理
  */
  //1.获取页面元素
  var checkAll = document.getElementById('checkAll');//全选
  var unCheckAll = document.getElementById('unCheckAll');//全不选
  var reverseCheck = document.getElementById('reverseCheck');//反选
  var checkList = document.getElementsByClassName('check');//选择框列表
  //2.注册事件
  //2.1 全选
  checkAll.onclick = function(){
    //3.事件处理:选中所有选择框(设置checked属性为true)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不选
  unCheckAll.onclick = function(){
    //3.事件处理:不选中所有选择框(设置checked属性为false)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反选
  reverseCheck.onclick = function(){
    //3.事件处理:让每一个选择框的checked属性与自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//逻辑非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>

完整示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS全选、全不选、反选</title>
</head>
<body>
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">
<script>
  /*一:需求分析:
      (1)点击全选:选中所有选择框(设置checked属性为true)
      (2)点击全不选:不选中所有选择框(设置checked属性为false)
      (3)点击反选:让每一个选择框的checked属性与自身相反
    二:思路分析
        1.获取元素
        2.注册事件
        3.事件处理
  */
  //1.获取页面元素
  var checkAll = document.getElementById('checkAll');//全选
  var unCheckAll = document.getElementById('unCheckAll');//全不选
  var reverseCheck = document.getElementById('reverseCheck');//反选
  var checkList = document.getElementsByClassName('check');//选择框列表
  //2.注册事件
  //2.1 全选
  checkAll.onclick = function(){
    //3.事件处理:选中所有选择框(设置checked属性为true)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不选
  unCheckAll.onclick = function(){
    //3.事件处理:不选中所有选择框(设置checked属性为false)
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反选
  reverseCheck.onclick = function(){
    //3.事件处理:让每一个选择框的checked属性与自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//逻辑非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
Vue结合后台导入导出Excel问题详解
Feb 19 #Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 #Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 #Javascript
小程序转发探索示例
Feb 19 #Javascript
JS异步执行结果获取的3种解决方式
Feb 19 #Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
You might like
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
python让函数不返回结果的方法
2020/06/22 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
Java模拟试题
2014/11/10 面试题
房屋改造计划书
2014/01/10 职场文书
家具促销活动方案
2014/02/16 职场文书
给领导的检讨书
2014/02/16 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
企业整改报告范文
2014/11/08 职场文书
仙境之桥观后感
2015/06/16 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript