zoukankan      html  css  js  c++  java
  • DOM表单(复选框)

    在表单中,尤为重要的一个属性是name

    <!--复选框的全选、全不选、反选-->
    <!DOCTYPE>
    <html>
    <head lang="en">
        <meta charset="utf-8"/>
        <title>复选框的全选、全不选、反选</title>
    </head>
    <body>
    <form id="form">
        <input type="checkbox" name="check" value="北京"  />北京
        <input type="checkbox" name="check" value="上海" />上海
        <input type="checkbox" name="check" value="广州" />广州
    
        <br>
        <input type="button" name="checkAll" value="全选"/>
        <input type="button" name="checkNone" value="全不选"/>
        <input type="button" name="checkOpp" value="反选"/>
    </form>
    <script>
        var oForm=document.getElementById("form");
        var Allbtn=oForm.checkAll;
        var Nonebtn=oForm.checkNone;
        var Oppbtn=oForm.checkOpp;
    
        Allbtn.onclick= function () {
            for(var i=0;i<oForm.check.length;i++){
                oForm.check[i].checked=true;
            }
    
        }
    
        Nonebtn.onclick= function () {
            for(var i=0;i<oForm.check.length;i++){
                oForm.check[i].checked=false;
            }
    
        }
    
        Oppbtn.onclick= function () {
            for(var i=0;i<oForm.check.length;i++) {
                if (oForm.check[i].checked){ //被选中
                    oForm.check[i].checked=false;
                }
                else{
                    oForm.check[i].checked=true;
                }
            }
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    03构建之法阅读笔记3—团队模式
    软件工程学习进度博客10
    第一阶段冲刺10
    第一阶段冲刺9
    第一阶段冲刺8
    第一阶段冲刺7
    第一阶段冲刺6
    第一阶段冲刺5
    团队项目冲刺第六天
    团队项目冲刺第五天
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5492057.html
Copyright © 2011-2022 走看看