js實現全選、全不選、反選的功能

時間 2019-11-09

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <META charset="utf-8"/>
        <link rel="stylesheet" href="table.css"/>
        <style>
            
        </style>
    </head>
    <body>
        愛好：<br/>
        讀書：<input type="checkbox" name="hobby" value="0"/><br/>
        游泳：<input type="checkbox" name="hobby" value="1"/><br/>
        聽歌：<input type="checkbox" name="hobby" value="2"/><br/>
        <hr/>
        <button value="1" onclick="setAll()">全選</button>
        <button value="0" onclick="setNo()">全不選</button>
        <button value="-1" onclick="setOthers()" >反選</button>
    </body>
    <script src="util.js"></script>
    <script>
    /*
        //全選函數
        function setAll() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }

        //全不選函數
        function setNo() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }

        //反選
        function setOthers() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                if (hobbies[i].checked == false)
                    hobbies[i].checked = true;
                else
                    hobbies[i].checked = false;
            }
        }

    */
        var inputs=$('input[name=hobby]');
        var btns=$('button');
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                var value=this.getAttribute('value');
                for(var i=0;i<inputs.length;i++){
                    if(value==1){
                        inputs[i].checked=true;
                    }else if(value==0){
                        inputs[i].checked=false;
                    }else{
                        inputs[i].checked=false;
                    }
                }
            }
        }

        
    </script>
</html>

util.jscss

function $(n){
    if(/^<([a-zA-Z]+)>$/.test(n)){
    var tagName = RegExp.$1;
    return document.createElement(tagName);
    }else{
        return document.querySelectorAll(n);
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。