zoukankan      html  css  js  c++  java
  • 08 千千音乐盒实现全选和反选

    <!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;
                 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>
  • 相关阅读:
    Java反射机制(创建Class对象的三种方式)
    webservice原理及基于cxf开发的基本流程
    开始打开eclipse .exe时候显示找不到jre路径
    Token验证详解
    RPC远程协议之Thrift入门
    RPC远程协议之原理分析
    Jmeter进行性能测试时多台负载机的配置方法
    Jmeter分布式部署测试-----远程连接多台电脑做压力性能测试
    Java 集合系列05之 LinkedList详细介绍(源码解析)和使用示例
    理解Cookie和Session机制
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14179221.html
Copyright © 2011-2022 走看看