zoukankan      html  css  js  c++  java
  • js实现checkbox全选,全部选和反选效果

    效果:

    源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            select{
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <input type="checkbox" name="fruit" value="1"><br/>
    <button type="button" onclick="selectAll()">全选</button>
    <button type="button" onclick="unSelectAll()">全不选</button>
    <button type="button" onclick="converSelectAll()">反选</button>
    <script type="text/javascript">
        var inputs =  document.getElementsByTagName("input");
        function selectAll(){
            for(var i = 0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }
        function unSelectAll(){
            for(var i = 0;i<inputs.length;i++){
                inputs[i].checked = false;
            }
        }
        function converSelectAll(){
            for(var i = 0;i<inputs.length;i++){
                if(inputs[i].checked){
                    inputs[i].checked = false;
                }else{
                    inputs[i].checked = true;
                }
            }
        }
    
    </script>
    </body>
    </html>

  • 相关阅读:
    HDU.6681.Rikka with Cake(欧拉公式 树状数组)
    Codeforces.449C.Willem, Chtholly and Seniorious(ODT)
    2017-2018 ACM-ICPC, Asia Daejeon Regional Contest (E,G,H,I,K)
    CF GYM.101987A.Circuits(线段树)
    2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018)
    220
    219
    218
    217
    216
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10003902.html
Copyright © 2011-2022 走看看