全选方法

来源：互联网发布：自己的淘宝店铺在哪里编辑：程序博客网时间：2024/06/15 17:02
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>全选</title>    <style>        .inner{            width: 200px;            border: 2px solid red;            margin: 0 auto;        }    </style></head><body>    <div class="inner" id="item">    <input type="checkbox">全选<div class="list">    <input type="checkbox">    <input type="checkbox">    <input type="checkbox"></div>    </div><script>    var checkAll=item.getElementsByTagName("input")[0];        var list=item.getElementsByTagName("div")[0];        var inputs=list.getElementsByTagName("input");        var n=0;        checkAll.onclick=function(){            /*点击全选，下边的全选*/            if(checkAll.checked==true){                for(var i=0;i<inputs.length;i++){                    inputs[i].checked=true;                }                n=3;            }else{                for(var i=0;i<inputs.length;i++){                    inputs[i].checked=false;                }                n=0;            }        };        for(var i=0;i<inputs.length;i++){            inputs[i].onclick=function(){                if(this.checked==true){                    n++;                }else{                    n--;                }                if(n==3){                    checkAll.checked=true;                }else{                    checkAll.checked=false;                }            }        }</script></body></html>
阅读全文
0 0