<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. JS实现的全选、全不选及反选功能【案例】

         更新时间:2019年02月19日 10:29:14   作者:庚中   我要评论

        这篇文章主要介绍了JS实现的全选、全不选及反选功能,涉及javascript事件响应、元素遍历与属性动态操作相关实现技巧,需要的朋友可以参考下

        本文实例讲述了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>www.09851116.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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

        更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

        希望本文所述?#28304;?#23478;JavaScript程序设计有所帮助。

        相关文章

        • Bootstrap table右键功能实现方法

          Bootstrap table右键功能实现方法

          这篇文章主要为大家详细介绍了Bootstrap table右键功能的实现代码,具有一定的参?#25216;?#20540;,感兴趣的小伙伴们可以参?#23478;?#19979;
          2017-02-02
        • Bootstrap前端开发案例二

          Bootstrap前端开发案例二

          Bootstrap前端开发案例二,这篇文章能够帮助大家更还好的进行前端开发Bootstrap,相信大家会爱上Bootstrap
          2016-06-06
        • iframe的onload在Chrome/Opera中执行两次Bug的解决方法

          iframe的onload在Chrome/Opera中执行两次Bug的解决方法

          创建iframe对象,添加load事件, 再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。
          2011-03-03
        • js实现两点之间画线的方法

          js实现两点之间画线的方法

          这篇文章主要介绍了js实现两点之间画线的方法,涉及javascript图?#20301;?#21046;的相关技巧,需要的朋友可以参考下
          2015-05-05
        • js使下拉列表框可编辑不止是选择

          js使下拉列表框可编辑不止是选择

          下拉列表框默认情况下是不可编辑的,下面为大家介绍个不错的方法可以使下拉列表框可编辑,具体实现如下,需要的朋友可以参考下
          2013-12-12
        • 最全面的JS倒计时代码

          最全面的JS倒计时代码

          这篇文章主要为大家详细介绍了最全面的JS倒计时代码,具有一定的参?#25216;?#20540;,感兴趣的小伙伴们可以参?#23478;?#19979;
          2016-09-09
        • form表单转Json提交的方法(推荐)

          form表单转Json提交的方法(推荐)

          下面小编就为大家带来一篇form表单转Json提交的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2016-09-09
        • BootStrap实现鼠标悬停下拉列表功能

          BootStrap实现鼠标悬停下拉列表功能

          这篇文章主要介绍了BootStrap实现鼠标悬停下拉列表功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
          2017-02-02
        • 深入浅出理解javaScript原型链

          深入浅出理解javaScript原型链

          这篇文章主要介绍了对javaScript原型链的理解,以实例形式对javaScript原型链的概念及相关使用技巧做了较为浅显易懂的分析,需要的朋友可以参考下
          2015-05-05
        • React组件的三?#20013;?#27861;总结

          React组件的三?#20013;?#27861;总结

          本文主要总结了React组件的三?#20013;?#27861;以及最佳实践,具有一定的参?#25216;?#20540;,下面跟着小编一起来看下吧
          2017-01-01

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>