zoukankan      html  css  js  c++  java
  • 原生js实现全选、反选

    收集了一个原生的js实现全选、全不选、反选

    <!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" />
    <style type="text/css">
    *{margin:0;padding:0;}
    ul{list-style-type:none;}
    #wrap{150px;margin:50px auto;}
    </style>
    <title></title>
    </head>
    <body>
    <div id="wrap">
    <input type="button" id="selecte_all" value="全选"/>
    <input type="button" id="selecte_no" value="全不选"/>
    <input type="button" id="selecte_etr" value="反选"/>
    <ul>
    <li><input type="checkbox" class="about" />资料</li>
    <li><input type="checkbox" class="about" />简历</li>
    <li><input type="checkbox" class="about" />经历</li>
    <li><input type="checkbox" class="about" />爱好</li>
    <li><input type="checkbox" class="about" />其他</li>
    </ul>
    </div>
    <script type="text/javascript">
    window.onload = init; //全部加载完执行
    function init() {
        var selecte_all = document.getElementById('selecte_all'); //全选
        var selecte_no = document.getElementById('selecte_no'); //全不选
        var selecte_etr = document.getElementById('selecte_etr'); //反选
        var check_list = document.getElementsByClassName('about'); //需要选择的input
      //全选
        selecte_all.onclick = function() {
            for (i = 0; i < check_list.length; i++) {
                check_list[i].checked = true;
            };
        }
     //全不选
        selecte_no.onclick = function() {
            for (i = 0; i < check_list.length; i++) {
                check_list[i].checked = false;
            };
        }
     //反选
        selecte_etr.onclick = function() {
            for (i = 0; i < check_list.length; i++) {
                check_list[i].checked = !check_list[i].checked;
            };
        }
    
    }
    
    </script>
    </body>
    </html>

    原文:http://www.alixixi.com/web/a/2012102984774.shtml

  • 相关阅读:
    C++程序设计实验-3
    函数
    C++简单程序设计
    C++程序设计实验-2
    C++程序设计实验-1
    项目总结
    团队测试计划
    第二阶段团队绩效评分
    第二阶段scrum-10
    第二阶段scrum-9
  • 原文地址:https://www.cnblogs.com/csdttnk/p/3079859.html
Copyright © 2011-2022 走看看