jQuery實作Checkbox復選框全選、全不選、反選等功能-有解無憂

前段時間使用JavaScript寫了一個簡易版的Checkbox全選全不選功能
于是最近使用jQuery完善了Checkbox的反選、提交等功能，以下為完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用prop和checked實作復選框全選全不選反選等功能</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 全選按鈕功能
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            });

            // 全不選按鈕功能
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            });

            // 反選按鈕功能
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    // 每次執行傳遞進來的函式時，函式中的this關鍵字都指向一個不同的DOM元素（這里指不同的items復選框）
                    this.checked = !this.checked;
                });
                // 獲取所有球類運動選項框的數量
                var allCount = $(":checkbox[name='items']").length;
                // 獲取當前球類運動選項框選中的數量
                var checkedCount = $(":checkbox[name='items']:checked").length;
                // 如果復選框選中數量和總數量相同，則將全選/全不選按鈕狀態隨之更改為true/false
                $("#checkedAllNone").prop("checked", allCount === checkedCount);
            });

            // 提交按鈕功能
            $("#submitBtn").click(function () {
                // :冒號選擇器要緊跟著前面的選擇器，不能有空格，不然會失去效果
                $(":checkbox[name='items']:checked").each(function () {
                    // 在事件的function函式中，有一個this物件，這個this物件是當前正在相應的DOM物件（這里指選中的運動）
                    alert(this.value);
                });
            });

            // 全選/全不選按鈕功能
            $("#checkedAllNone").click(function () {
                //在事件的function函式中，有一個this物件，這個this物件是當前正在相應的DOM物件（這里指全選/全不選按鈕）
                $(":checkbox[name='items']").prop("checked", this.checked);
            });

            // 當所有球類運動復選框都被選中時，全選按鈕同時更改為被選中狀態
            $(":checkbox[name='items']").click(function () {
                // 獲取所有球類運動選項框的數量
                var allCount = $(":checkbox[name='items']").length;
                // 獲取當前球類運動選項框選中的數量
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllNone").prop("checked", allCount == checkedCount);
            });
        });
    </script>
</head>
<body>
<div style="width:100%;text-align:center">
<form>
    <span>請選擇你喜歡的多項球類運動吧：</span>
    <br><br>
    <input type="checkbox" id="checkedAllNone">全選/全不選
    <br>
    <input type="checkbox" name="items" value="https://www.cnblogs.com/xiqingbo/p/籃球">籃球
    <input type="checkbox" name="items" value="https://www.cnblogs.com/xiqingbo/p/足球">足球
    <input type="checkbox" name="items" value="https://www.cnblogs.com/xiqingbo/p/冰球">冰球
    <input type="checkbox" name="items" value="https://www.cnblogs.com/xiqingbo/p/棒球">棒球
    <br><br>
    <input type="button" id="checkedAllBtn" value="https://www.cnblogs.com/xiqingbo/p/全選">
    &nbsp;
    <input type="button" id="checkedNoBtn" value="https://www.cnblogs.com/xiqingbo/p/全不選">
    &nbsp;
    <input type="button" id="checkedRevBtn" value="https://www.cnblogs.com/xiqingbo/p/反選">
    &nbsp;
    <input type="button" id="submitBtn" value="https://www.cnblogs.com/xiqingbo/p/提交">
</form>
</div>
</body>
</html>

代碼運行效果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/253887.html

標籤：jQuery

上一篇：一篇文章帶你初步了解—CSS特指度

下一篇：jQuery使用hide()、toggle()函式實作相機品牌展示隱藏功能