zoukankan      html  css  js  c++  java
  • js表单操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选</title>
    </head>
    <body>
        <input id="a" type="checkbox" /><label for="a">反选</label>
        <input id="b" type="checkbox" /><label for="b">全选</label>
    
    <div id="area">
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" checked=true />
        <input type="checkbox" checked=true />
        <input type="checkbox" checked=true />
        <input type="checkbox" checked=true />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
    </div>
    </body>
    </html>
    <script type="text/javascript">
    var oInput=document.getElementById("a");
    var bInput=document.getElementById("b");
    
    var aInput=document.getElementsByTagName("div")[0].getElementsByTagName("input");
    bInput.onclick=function(){
        if(this.checked){
            for (var i = 0; i < aInput.length; i++){    
                aInput[i].checked=true;
                }
        }else{
            for (var i = 0; i < aInput.length; i++){    
                aInput[i].checked=false;
                }
        }
    }
    
    oInput.onclick=function(){
    
    
        for (var i = 0; i < aInput.length; i++){
            if(aInput[i].checked){
                aInput[i].checked=false;
            }else{
                aInput[i].checked=true;
            }
            
        };
    }
    </script>
  • 相关阅读:
    window.open跨页面传输
    history对象
    类vr特效的360度全景
    移动端图片滑动
    图片拼图
    20180808 考试记录
    [jzoj 5770]【2018提高组模拟A组8.6】可爱精灵宝贝 (区间dp)
    20180806 考试记录
    [luogu2319 HNOI2006] 超级英雄 (匈牙利算法)
    [luogu2679] 子串 (多维dp)
  • 原文地址:https://www.cnblogs.com/busicu/p/4228181.html
Copyright © 2011-2022 走看看