zoukankan      html  css  js  c++  java
  • JavaScript实现表单的全选,反选,获取值

    构思

      通过for循环和for in循环来实现,界面效果如下

      

    步骤

      全选:

          循环给所有的表单设置checked

      反选:

          循环内判断checked是否为true,如果为true则改为false否则改为true

      获取值:

          最开始用for取,但是只打印最后一个,然后就放弃直接使用for in 来取值,后面有时间再思考这个。如果有更好的方法,您可以在评论区留下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
        <div id="check">
            <input type="checkbox"  value="A">A <br>
            <input type="checkbox"  value="B">B <br>
            <input type="checkbox"  value="C">C <br>
            <input type="checkbox"  value="D">D <br>
            <input type="checkbox"  value="E">E <br>
        </div>
        <br><br>
        <input type="button" onclick="checkAll();" value="全选">
        <input type="button" onclick="checkRev()" value="反选">
        <input type="button" onclick="getAll()" value="获取">
    </body>
        <script>
            var oCheck  = document.getElementById('check');
            var oInput = oCheck.getElementsByTagName('input');
    
            // 全选
            function checkAll(){
                for (var i = 0; i < oInput.length; i++) {
                    oInput[i].checked = true;
                }
            }
    
            // 反选
            function checkRev(){
                for (var i = 0; i < oInput.length; i++) {
                    if (oInput[i].checked) {
                        oInput[i].checked = false;
                    }else{
                        oInput[i].checked = true;
                    }
                }
            }
    
            // 获取值
             var oRes = [];
            function getAll(){
                for(var i in oInput){
                    if(oInput[i].checked == true){
                        oRes.push('' + (Number(i)+1) + '个选项,您的选择是' + oInput[i].value);
                    }
                }
                if (oRes.length == 0) {
                    alert('您没有选择任何值');
                }else{
                    alert(oRes);
                    oRes = [];
                }
            }
        </script>
    </html>

      

      

  • 相关阅读:
    js中删除数组元素的几种方法
    js中的prototype
    分布式服务框架 Zookeeper -- 管理分布式环境中的数据
    angularjs事件传递$on、$emit和$broadcast
    cron表达式
    angularjs中的时间格式化过滤
    angularjs中的$q
    IOS 错误
    Swift 错误
    IOS 控件
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/9546159.html
Copyright © 2011-2022 走看看