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>

  • 相关阅读:
    LOJ3160 「NOI2019」斗主地
    常系数齐次线性递推
    最小树形图——朱刘算法学习小记
    Linux系统分区(一)
    Linux系统启动过程(二)
    Linux系统目录结构(三)
    cross_val_score
    sklearn.pipeline.Pileline
    DBSCAN密度聚类算法
    特征选择
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10003902.html
Copyright © 2011-2022 走看看