码迷,mamicode.com
首页 > 其他好文 > 详细

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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!