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>
  • 相关阅读:
    Android_程序未处理异常的捕获与处理
    instanceof关键字
    乐优商城项目爬坑
    [LeetCode]Isomorphic Strings
    [LeetCode]Contains Duplicate II
    [LeetCode]Valid Sudoku
    [LeetCode]Valid Anagram
    [LeetCode]Contains Duplicate
    [LeetCode]Single Number
    [LeetCode]Valid Number
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5492057.html
Copyright © 2011-2022 走看看