JavaScript实现表单的全选,反选,获取值

2024-08-16 09:28:56 浏览数 (4)

构思

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

步骤

  全选:

      循环给所有的表单设置checked

  反选:

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

  获取值:

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

代码语言:javascript复制
<!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>

0 人点赞