input -多选反选不选

时间：2018-04-16 23:59:30 阅读：291 评论：0 收藏：0 [点我收藏+]

标签：20px button title 样式 ado 反选 width code script

<!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>

input -多选反选不选

标签：20px button title 样式 ado 反选 width code script

原文地址：https://www.cnblogs.com/yelena-niu/p/8859007.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

input -多选 反选 不选

input -多选反选不选