代码改变世界

input -多选 反选 不选

2018-04-16 22:36  yelena  阅读(199)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 1000px;
                height: 200px;
                background-color: lavender;
                box-shadow: 5px 5px 2px lightblue;
            }
            button{
                margin-left: 20px;
            }
        .ys{
            border: 1px solid yellow;
            height: 50px;
            width: 50px;
            margin-left: 5px;
            float: left;
        }
        .ys1{
            border: 1px solid yellow;
            height: 50px;
            width: 50px;
            margin-left: 5px;
            float: left;
        }
        </style>
    </head>
    <body>
        <input type="checkbox"  id="qx" value="" onclick="qx()"/>全选
        <input type="checkbox" id="fx" value="" onclick="fx()" />反选
        <input type="checkbox" name="xz" id="" value="语文" />语文
        <input type="checkbox" name="xz" id="" value="数学" />数学
        <input type="checkbox" name="xz" id="" value="英语" />英语
        <input type="checkbox" name="xz" id="" value="物理" />物理
        <input type="checkbox" name="xz" id="" value="化学" />化学
        <input type="checkbox"  id="bx" value="" onclick="bx()"/>不选
        <br />
        <div id="">
            while循环
            <br />
            <br />
        <button onclick="five()">循环出现提示框5次</button>
        </div>
        <br />
        <br />
        <br />
        <div id="">
            for循环
            <br />
            <br />
            <button onclick="ys11()">批量修改样式</button>
            <br />
            <br />
            <br />
            <div class="ys"></div>
            <div class="ys"></div>
            <div class="ys"></div>
            <div class="ys"></div>
        </div>
        <br />
        <br />
        <br />
        <div id="">
            for循环
            <br />
            <br />
            <button onclick="ys12()">批量修改样式可循环</button>
            <br />
            <br />
            <br />
            <div class="ys1"></div>
            <div class="ys1"></div>
            <div class="ys1"></div>
            <div class="ys1"></div>
        </div>
    </body>
</html>
<script type="text/javascript">
    function fx(){
        var fx = document.getElementById("fx");
        var attr = document.getElementsByName("xz");
        for(var i = 0; i<attr.length;i++){
        if(fx.checked){
            if(attr[i].checked){
                attr[i].checked = false;
            }
            else{
                attr[i].checked = true;
            }
        }
        else{
            if(attr[i].checked){
                attr[i].checked = false;
            }
            else{
                attr[i].checked = true;
            }
        }
        
    }
    }
    function qx(){
        var qx = document.getElementById("qx");
        var attr = document.getElementsByName("xz");
        for(var i = 0;i<attr.length;i++){
            if(qx.checked){
                attr[i].checked = true;
            }
            else{
                attr[i].checked = false;
            }
        }
    }
    function bx(){
        var bx = document.getElementById("bx");
        var attr = document.getElementsByName("xz");
        if(bx.checked){
        for(var i = 0;i<attr.length;i++){
            attr[i].checked=false;
        }
        }
    }
    function five(){
        for(var i = 1;i<=5;i++){
            alert("这是第"+i+"次弹出");
        }
    }
    function ys11(){
        var attr = document.getElementsByClassName("ys");
        for(i = 0;i<attr.length;i++){
            attr[i].style.backgroundColor = "yellow";
        }
    }
    function ys12(){
        var attr = document.getElementsByClassName("ys1");
        for(i = 0;i<attr.length;i++){
            if(attr[i].style.backgroundColor=="yellow"){
            attr[i].style.backgroundColor = "lavender";
            }
            else{
                attr[i].style.backgroundColor="yellow";
            }
        }
    }
</script>