jQuery之爱好选择

来源:
网络
收录时间:
2021-02-16 14:58:36
体育 阅读 339421

摘要:你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选。<input type="checkbox" name="items" value="足球"/>足球。<input type="button" id="checkedAllBtn" value="全 选"/>

爱好选择(原生)

示例:

<!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>
查看全文
返回顶部