zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    93.快速搭建Web环境 Angularjs + Express3 + Bootstrap3
    92.bower 需要git
    91.Bower : ENOGIT git is not installed or not in the PATH 解决方法
    5.Git使用详细教程
    4.git "Could not read from remote repository.Please make sure you have the correct access rights."解决方案
    2.windows下安装git
    Git常用命令
    每天一个linux命令(50):crontab命令
    crontab 不能执行git命令问题备忘
    Git PHP提交
  • 原文地址:https://www.cnblogs.com/yelena-niu/p/8859007.html
Copyright © 2011-2022 走看看