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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
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
php生成静态文件的多种方法分享
2012/07/17 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
jquery ui对话框实例代码
2013/05/10 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
详解Python发送邮件实例
2016/01/10 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
环保建议书600字
2014/05/14 职场文书
三八节标语
2014/06/27 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
python实现双向链表原理
2022/05/25 Python