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>

 爱好选择(jQuery)

示例:

<!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>