天天看点

【纯JavaScript 制作多选框逻辑实现】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="checkbox" id="all">选<br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
    </form>
    <script>
        var inputs;
        init()
        function init(){
            inputs = [].concat.apply([],document.getElementsByTagName('input'))
            console.log(inputs);
            for(var i=0;i<inputs.length;i++){
                inputs[i].onclick = clickHandler
            }
        }
        function clickHandler(){
            if(this.id == 'all'){
                for(var i=0;i<inputs.slice(1).length;i++){
                    inputs[i+1].checked = inputs[0].checked;
                }
                // inputs.slice.forEach(function(item){
                //     item.checked=this.checked;
                //     console.log('@@@',this);
                // },this)
            }else{
                inputs[0].checked = inputs.slice(1).every(function(item){
                    return item.checked;
                })
            }
        }
    </script>
</body>
</html>      

继续阅读