jQuery之爱好选择

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>爱好选择（原生）title>
head>
body>

form method="post" action="">
    你爱好的运动是？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>

script type="text/javascript">
    /*
     * 功能说明：
     * 1.点击‘全选‘：选中所有爱好
     * 2.点击‘全不选‘：所有爱好都不勾选
     * 3.点击‘反选‘：改变所有爱好的勾选状态
     * 4.点击‘提交‘：提示所有勾选的爱好
     * 5.点击‘全选/全不选‘：选中所有爱好，或者全不选中
     * 6.点击某个爱好时，必要时更新‘全选/全不选‘的选中状态
     * 技术点：
     * 1.DOM查询
     * 2.事件回调函数绑定
     * 3.checkbox操作
     * 4.事件回调函数中的this
     * 5.逻辑思维能力
     */
    window.onload = function () {

        var items = document.getElementsByName("items");

        //1.#checkedAllBtn
        var checkedAllBtn = document.getElementById("checkedAllBtn");
        checkedAllBtn.onclick = function () {
            setItemsChecked(true);
            checkedAllBox.checked = true;
        };

        //2.#checkedNoBtn
        var checkedNoBtn = document.getElementById("checkedNoBtn");
        checkedNoBtn.onclick = function () {
            setItemsChecked(false);
            checkedAllBox.checked = false;
        };

        //3.#checkedRevBtn
        var checkedRevBtn = document.getElementById("checkedRevBtn");
        checkedRevBtn.onclick = function () {
            setItemsChecked();
            //点满时将checkedAllBox.checked设置为true
            //统计当前items中被选中的个数
            checkedAllBox.checked = isAllChecked();
        };

        //4.#checkedAllBox
        var checkedAllBox = document.getElementById("checkedAllBox");
        checkedAllBox.onclick = function () {
            setItemsChecked(this.checked);
        };

        //5.#sendBtn
        var sendBtn = document.getElementById("sendBtn");
        sendBtn.onclick = function () {
            for (var i = 0; i  items.length; i++) {
                if (items[i].checked) {
                    alert(items[i].value);
                }
            }
        };

        //6.items
        for (var i = 0; i  items.length; i++) {
            items[i].onclick = function () {
                //点满时将checkedAllBox.checked设置为true
                //统计当前items中被选中的个数
                checkedAllBox.checked = isAllChecked();
            }
        }

        function isAllChecked() {
            for (var j = 0; j  items.length; j++) {
                if (!items[j].checked)
                    return false;
            }
            return true;
        };

        function setItemsChecked(checked) {
            for (var i = 0; i  items.length; i++) {
                items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;
            }
        }
    }
script>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>爱好选择（jQuery）title>
head>
body>

form>
    你爱好的运动是？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>

script type="text/javascript" src="../js/jquery.min.js">script>
script type="text/javascript">
    /*
     * 功能说明：
     * 1.点击‘全选‘：选中所有爱好
     * 2.点击‘全不选‘：所有爱好都不勾选
     * 3.点击‘反选‘：改变所有爱好的勾选状态
     * 4.点击‘全选/全不选‘：选中所有爱好，或者全不选中
     * 5.点击某个爱好时，必要时更新‘全选/全不选‘的选中状态
     * 6.点击‘提交‘：提示所有勾选的爱好
     */
    $(function () {
        var $Items = $(‘:checkbox[name=items]‘);
        var $checkedAllBox = $(‘#checkedAllBox‘);

        //1.点击‘全选‘：选中所有爱好
        $(‘#checkedAllBtn‘).click(function () {
            $Items.prop(‘checked‘, true);
            $checkedAllBox.prop(‘checked‘, true);
        });

        //2.点击‘全不选‘：所有爱好都不勾选
        $(‘#checkedNoBtn‘).click(function () {
            $Items.prop(‘checked‘, false);
            $checkedAllBox.prop(‘checked‘, false);
        });

        //3.点击‘反选‘：改变所有爱好的勾选状态
        $(‘#checkedRevBtn‘).click(function () {
            $Items.each(function () {
                this.checked = !this.checked;
            });
            $checkedAllBox.prop(‘checked‘, $Items.filter(‘:not(:checked)‘).size()===0);
        });

        //4.点击‘全选/全不选‘：选中所有爱好，或者全不选中
        $checkedAllBox.click(function () {
            $Items.prop(‘checked‘, this.checked);
        });

        //5.点击某个爱好时，必要时更新‘全选/全不选‘的选中状态
        $Items.click(function () {
            $checkedAllBox.prop(‘checked‘, $Items.filter(‘:not(:checked)‘).size()===0);
        });

        //6.点击‘提交‘：提示所有勾选的爱好
        $(‘#sendBtn‘).click(function () {
            $Items.filter(‘:checked‘).each(function () {
                alert(this.value);
            })
        });
    });
script>
body>
html>