个人js学习实例-点击按钮实现全选与反选，及封装函数调用前后

本文链接：https://blog.youkuaiyun.com/luckybuling/article/details/81638344

原始：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选和反选</title>
    <!--引入bootstrap-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-center" style="margin-top: 50px">
    <button class="btn btn-success">全选</button>
    <button class="btn btn-default">取消</button>
    <button class="btn btn-danger">反选</button>
</div>
<div id="bottom" class="container-fluid text-center" style="margin-top: 10px;">
    <ul class="list-unstyled">
        <li>德玛西亚：<input type="checkbox"></li>
        <li>德玛西亚：<input type="checkbox"></li>
        <li>德玛西亚：<input type="checkbox"></li>
        <li>德玛西亚：<input type="checkbox"></li>
        <li>德玛西亚：<input type="checkbox"></li>
        <li>德玛西亚：<input type="checkbox"></li>
    </ul>
</div>

<script>
    window.onload = function () {
        //获取三个button按钮赋给数组btns
        var btns = document.getElementsByTagName("button");
//        将id为bottom的div里的input全部获取赋给数组inps
        var inps = document.getElementById("bottom").getElementsByTagName("input");
        //第一个按钮全选
        btns[0].onclick = function () {
            //循环ins数组
            for(var i = 0; i<inps.length; i++){
//                选中表单
                inps[i].checked = true;
            }
        }
        //第2个按钮取消全选
        btns[1].onclick = function () {
            for(var i = 0; i<inps.length; i++){
//                选中表单
                inps[i].checked = false;
            }
        }
        //第3个按钮反选
        btns[2].onclick = function () {
            for(var i = 0; i<inps.length; i++){
//                选中表单，利用for循环遍历，如果是input的checked的值是false，赋给true值，如果是input的checked的值是true，赋给false值
                if(inps[i].checked == false){
                    inps[i].checked = true;
                }else {
                    inps[i].checked = false;
                }
            }
        }
    }
</script>
</body>
</html>

封装函数后：

<script>
    window.onload = function () {
        //获取三个button按钮赋给数组btns
        var btns = document.getElementsByTagName("button");
//        将id为bottom的div里的input全部获取赋给数组inps
        var inps = document.getElementById("bottom").getElementsByTagName("input");
//        建立封装函数all函数等待调用，参数flag指的是后面调用时的给的布尔值
        function  all(flag) {
//            遍历input的数组inps
            for(var i = 0; i<inps.length; i++){
//                将参数flag的值赋给便利到的inps[i]
                inps[i].checked = flag;
            }
        }
        btns[0].onclick = function () {
            //调用函数all，将布尔值true赋给形参flag
            all(true);
        };
        btns[1].onclick = function () {
            //调用函数all，将布尔值false赋给形参flag
            all(false);
        };
        //第3个按钮反选
        btns[2].onclick = function () {
            for(var i = 0; i<inps.length; i++){
//                利用三目运算，如果inps[i].checked的值是true，则执行第一个inps[i].checked = false，如果不是执行第二个inps[i].checked = true
                inps[i].checked == true?inps[i].checked = false:inps[i].checked = true;
            }
        }
    }
</script>