machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        window.onload = function () {
            //获取四个多选框
            var items = document.getElementsByName("items");
            //获取全选/全不选的多选框
            var checkedAllBox = document.getElementById("checkedAllBox");

            /**
             * 全选按钮
             *  -点击按钮以后，四个多选框全都被选中
            */
            // 1.#checkedAllBtn
            //为id为checkedAllBtn的按钮绑定一个单击相应函数
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function () {
                // alert("点了全选");
                //获取四个多选框items
                var items = document.getElementsByName("items");
                // alert(items.length);
                //遍历items
                for (var i = 0; i < items.length; i++) {
                    //设置四个多选框变成选中状态
                    //通过多选框的checked属性可以来获取或设置多选框的选中状态
                    // alert(items[i].checked);//选中了返回true，没选中返回false
                    items[i].checked = true;
                };
                //将全选/全不选设置为选中  
                checkedAllBox.checked = true;
            };

            // 2.#checkedNoBtn
            /*
            全不选按钮
                -点击按钮以后，四个多选框都变成没选中的状态
            */
            //我做的
            //为id为checkedNoBtn的按钮绑定一个单击相应函数
            // var checkedNoBtn = document.getElementById("checkedNoBtn");
            // checkedNoBtn.onclick = function () {
            //     // alert("点了全不选");
            //     //获取四个多选框
            //     var items = document.getElementsByName("items");
            //     // alert(items.length);
            //     //遍历items
            //     for (var i = 0; i < items.length; i++) {
            //         // 设置四个选框为未选中状态
            //         items[i].checked = false;                   
            //     };
            // };
            //老师讲的
            //为id为checkedNoBtn的按钮绑定一个单击相应函数
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {
                for (var i = 0; i < items.length; i++) {
                    //将四个多选框设置为没选中的状态
                    items[i].checked = false;
                };
                //将全选/全不选设置为选中  
                checkedAllBox.checked = false;
            };


            // 3.#checkedRevBtn
            /*
            反选按钮
                -点击按钮以后，选中的变成没选中，没选中的变成选中
            */
            //我做的
            //为id为checkedRevBtn的按钮绑定一个单击相应函数
            // var checkedRevBtn = document.getElementById("checkedRevBtn");
            // checkedRevBtn.onclick = function () {
            //     // alert("按钮被点击了");
            //     //获取四个选框
            //     var items = document.getElementsByName("items");
            //     // alert(items.length);
            //     //遍历选框
            //     for (var i = 0; i < items.length; i++) {
            //         // alert(items[i].checked);
            //         //判断复选框状态
            //         if (items[i].checked == true) {
            //             items[i].checked = false;
            //         } else {
            //             items[i].checked = true
            //         };
            //     };
            // };

            //老师讲的
            //为id为checkedRevBtn的按钮绑定一个单击相应函数
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function () {
                //将checkedAllBox设置为选中状态（默认为选中状态
                checkedAllBox.checked = true;
                for (var i = 0; i < items.length; i++) {
                    //判断多选框的状态
                    // if (items[i].checked) {
                    //     //证明多选框已选中，则设置为没选中状态
                    //     items[i].checked = false;
                    // } else {
                    //     //证明多选框没选中，则设置为选中状态
                    //     items[i].checked = true;
                    // };
                    items[i].checked = !items[i].checked;
                    //判断四个多选框是否全选
                    //只要有一个没选中就不是全选
                    if (!items[i].checked) {
                        //一旦进入判断，则证明不是全选
                        //将checkedAllBox设置为没选中状态
                        checkedAllBox.checked = false;
                        //一旦进入判断，则已经得出结果，不用再继续执行循环                       
                    }
                };
                //在反选时也需要判断四个多选框是否全都选中

            };

            // 4.#sendBtn
            /*
            提交按钮
                -点击按钮以后，将所有选中的多选框的value属性值弹出
            */
            //我做的
            //为id为sendBtn的按钮绑定一个单击相应函数
            // var sendBtn = document.getElementById("sendBtn");
            // sendBtn.onclick = function () {
            //     // alert("点击了提交");
            //     //获取选框
            //     var items = document.getElementsByName("items");
            //     // alert(items.length);
            //     //遍历复选框
            //     for (var i = 0; i < items.length; i++) {
            //         // alert(items[i].checked);
            //         // alert(items[i].value);
            //         //判断复选框状态
            //         if (items[i].checked == true) {
            //             alert(items[i].value);
            //         };
            //     };
            // };

            //老师讲的
            //为id为sendBtn的按钮绑定一个单击相应函数
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {
                //遍历items
                for (var i = 0; i < items.length; i++) {
                    //判断多选框是否选中
                    if (items[i].checked) {
                        alert(items[i].value);
                    };
                };
            };

            // 5.#checkedAllBox
            /*
            全选/全不选多选框
                -当它选中时，其余的也选中，当它取消时，其余的也取消\

                在事件的响应函数中，响应函数是给谁绑定的，this就是谁
            */
            //为id为sendBtn的按钮绑定一个单击相应函数
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function () {
                // alert(this === checkedAllBox);
                //设置多选框的选中状态
                for (var i = 0; i < items.length; i++) {
                    // items[i].checked = checkedAllBox.checked;
                    items[i].checked = this.checked;
                };
            };

            // 6.items
            /*
            如果四个多选框全部都选中，则checkedAllBox也应该选中
            如果四个多选框没全被选中，则checkedAllBox也不应该选中
            */
            //为四个多选框分别绑定点击响应函数
            for (var i = 0; i < items.length; i++) {
                items[i].onclick = function () {
                    //将checkedAllBox设置为选中状态（默认为选中状态
                    checkedAllBox.checked = true;
                    // alert("hello");
                    for (var j = 0; j < items.length; j++) {
                        //判断四个多选框是否全选
                        //只要有一个没选中就不是全选
                        if (!items[j].checked) {
                            //一旦进入判断，则证明不是全选
                            //将checkedAllBox设置为没选中状态
                            checkedAllBox.checked = false;
                            //一旦进入判断，则已经得出结果，不用再继续执行循环
                            break;
                        }
                    };
                };
            };
        }

    </script>
</head>

<body>
    <form class="" report-submit="false" bindsubmit="" bindreset="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全  选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反  选" />
        <input type="button" id="sendBtn" value="提  交" />

    </form>
</body>

</html>