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>

相关阅读:
条件随机场(Conditional random field)
隐马尔科夫模型(hidden Markov Model)
什么是EM算法？
非线性支持向量机基础——核函数之我见
支持向量机(support vector machine)
决策树之CART算法
决策树到底是什么？
pytorch下对简单的数据进行分类(classification)
git status 命令
spring中事务的实现方式和失效场景

原文地址：https://www.cnblogs.com/wangyang0210/p/9546159.html