JavaScript實現(xiàn)復選框全選或全取消操作

更新時間：2023年06月11日 00:51:02 作者：qq_39111074

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)復選框全選或全取消操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)復選框全選或全取消的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)思路

1、獲取總選框、所有小選框元素對象
2、按鈕控制小按鈕- - -給總選框綁定onclick點擊事件，事件處理程序- - -for循環(huán)遍歷所有小選框，將總選框的- - -checked屬性值- - -賦值給它們
3、小按鈕影響總按鈕- - -for循環(huán) 給每個小復選框綁定點擊事件，每次點擊都 for循環(huán) 檢查所有的復選框是否被選中：
設置一個變量 flag 控制總按鈕的選中狀態(tài)，初始值為 true ，for循環(huán)遍歷檢查各小復選框選中狀態(tài)，只要有一個沒有選上，flag = false，break 跳出循環(huán)不再檢查后面的小復選框狀態(tài)，最后總按鈕checked屬性值 = flag

注意：在html中選中狀態(tài) checked = “checked”,但是在js中，選中狀態(tài)- - -checked = true; 未選中狀態(tài)- - -checked = false;

建議：這種取屬性值的，可以在控制臺打印一下，看下值是多少

代碼示例

<!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>多選框</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }
        
        thead {
            color: #fff;
            background-color: #008dd0;
        }
    </style>
</head>

<body>
    <div class="box">
        <table border="1" cellspacing="0" cellpadding="5" width="200" align="center">
            <thead>
                <tr>
                    <th><input type="checkbox" value="0" id="cbAll"></th>
                    <th>運動</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" value="1"></td>
                    <td>跑步</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="2"></td>
                    <td>跳繩</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="3"></td>
                    <td>瑜伽</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="4"></td>
                    <td>游泳</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="5"></td>
                    <td>騎行</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var all = document.querySelector('#cbAll');
        var sports = document.querySelector('#tb').querySelectorAll('input');

        // 給全選按鈕綁定點擊事件
        all.onclick = function() {
            console.log(all.checked);
            for (var i = 0; i < sports.length; i++) {
                sports[i].checked = all.checked;
            }
        }

        // 給每個小復選框綁定點擊事件
        for (var i = 0; i < sports.length; i++) {
            sports[i].onclick = function() {
                // 控制全選按鈕是否選中
                var flag = true;
                // 每次點擊一個小框，都檢查是否所有復選框都被選中
                for (var i = 0; i < sports.length; i++) {
                    if (!sports[i].checked) {
                        flag = false;
                        break; // 只要有一個小復選框沒有被選中，全選按鈕就沒被選中，可跳出循環(huán)，下面小復選框不用再判斷
                    }
                }
                all.checked = flag;
            }
        }
    </script>
</body>

</html>

頁面效果：

下面是補充資料

實現(xiàn)步驟

1.需求分析

全選按鈕——當用戶點擊全選時，所有子列表都變?yōu)檫x中狀態(tài)，且全選按鈕的文字描述也會做相應改變。
子列表按鈕——當用戶選中所有子列表時，全選按鈕也會變成選中狀態(tài)。
反選按鈕——對子列表的選中狀態(tài)做相應改變，例如：選中狀態(tài)變?yōu)槲催x中狀態(tài)。

2.HTML結(jié)構(gòu)

代碼如下（示例）：

 
    <!-- 表格外部容器 -->
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                        <span id="txt">全選</span>
                    </th>
                    <th>菜名</th>
                    <th>飯店</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>紅燒肉</td>
                    <td>好再來</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西紅柿雞蛋</td>
                    <td>好再來</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>油炸榴蓮</td>
                    <td>好再來</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>清蒸助教</td>
                    <td>好再來</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5"><button id="rev">反選</button></td>
                </tr>
            </tfoot>
        </table>
    </div>

3.CSS樣式

代碼如下（示例）：

   <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }
        td {
            font: 14px "微軟雅黑";
        }
        td:nth-of-type(1) {
            text-align: center;
        }
        tbody tr,
        tfoot tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
        button {
            width: 50px;
        }
    </style>

4.JS部分

  <script>
        //獲取全選的這個復選框
        var ckAll = document.getElementById("j_cbAll");
        //獲取文字顯示span
        var txt = document.getElementById("txt");
        //獲取tbody中所有的小復選框
        var cks = document.querySelectorAll("#j_tb input");
        // console.log(cks);
        //點擊全選的這個復選框,獲取他當前的狀態(tài),然后設置tbody中所有復選框的狀態(tài)
        ckAll.onclick = function () {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked;
            }
            //順便修改文本顯示
            txt.innerText = this.checked ? "全不選" : "全選";
        };
        //獲取tbody中所有的復選框,分別注冊點擊事件
        for (var i = 0; i < cks.length; i++) {
            // 此處了調(diào)用了下方封裝的函數(shù)對象，但未調(diào)用函數(shù)？
            cks[i].onclick = fn;
        }
        // 反選功能
        // 獲取按鈕
        var btn = document.getElementById("rev");
        btn.onclick = function () {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = !cks[i].checked
            }
            fn();
        }
        // 代碼復用，函數(shù)封裝
        function fn() {
            var flag = true; //默認都被選中了
            //判斷是否所有的復選框都選中
            for (var j = 0; j < cks.length; j++) {
                if (!cks[j].checked) {
                    flag = false;
                    break;
                }
            }
            //全選的這個復選框的狀態(tài)就是flag這個變量的值
            ckAll.checked = flag;
            //記得修改文本顯示
            txt.innerText = flag ? "全不選" : "全選";
        }
    </script>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: