<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type=”text/css”>
        *{
            padding: 0;
            margin: 0;
        }

        #panel{
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 400px;
            padding: 20px;
            margin: 100px auto;
            background-image: url(\’./image/skin1.jpg\’);
            color: red;
        }

        .panel-footer{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id=”panel”>
        <div class=”panpel-title”>
            <h3>千千音乐盒</h3>
            <hr>
        </div>
        <div class=”panel-content”>
            <input type=”checkbox”><a href=”https://www.kugou.com/song/#hash=9C4F738916585D0039CB811AC131BFF8&album_id=560257″>漂洋过海来看你</a><br>
            <input type=”checkbox”><a href=”https://www.kugou.com/song/#hash=E99455F42E5E6D1AC37F8346698FFC28&album_id=557277″>一眼万年</a><br>
            <input type=”checkbox”><a href=”https://www.kugou.com/song/#hash=E99455F42E5E6D1AC37F8346698FFC28&album_id=557277″>后来</a><br>
            <input type=”checkbox”><a href=”https://www.kugou.com/song/#hash=1AD3D0E7ABB3261A28977E57F59BB1E1&album_id=962530″>没那么简单</a><br>
            <input type=”checkbox”><a href=”https://www.kugou.com/song/#hash=1AD3D0E7ABB3261A28977E57F59BB1E1&album_id=962530″>如果你要离去</a><br>
        </div>
        <div class=”panel-footer”>
            <hr>
            <button id=”allSelect”>全选</button>
            <button id=”cancleSelect”>取消选中</button>
            <button id=”reverseSelect”>反选</button>
        </div>
    </div>

    <script type=”text/javascript”>
        //1.获取事件源
        function $(id){
            return typeof id === \’string\’ ? document.getElementById(id):null;
        }

        var inputs = document.getElementsByTagName(\’input\’);

        console.log($(\’allSelect\’))
        //2.全选
        $(\’allSelect\’).onclick = function(){
            for(var i = 0;i < inputs.length;i++){
                inputs[i].checked = true;
            }
        }

        //3.取消选中
        $(\’cancleSelect\’).onclick = function(){
            for(var i = 0;i < inputs.length;i++){
                inputs[i].checked = false;
            }
        }

        //4.反选
        $(\’reverseSelect\’).onclick = function(){
            for(var i = 0;i < inputs.length;i++){
                inputs[i].checked = !inputs[i].checked;

                // if(inputs[i].checked){
                //  inputs[i].checked = false;
                // }else{inputs[i].checked=true}
            }
        }
    </script>
</body>
</html>

版权声明：本文为wuhui1222原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wuhui1222/p/14179221.html