input -多选反选不选

Posted 2020-10-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input -多选反选不选相关的知识，希望对你有一定的参考价值。

<!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 -多选反选不选的主要内容，如果未能解决你的问题，请参考以下文章

javascript实现全选，全不选，反选

input -多选 反选 不选

input -多选反选不选