快捷導(dǎo)航

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

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

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

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

實(shí)現(xiàn)思路

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

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

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

代碼示例

<!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>運(yùn)動(dòng)</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');

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

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

</html>

頁(yè)面效果：

下面是補(bǔ)充資料

實(shí)現(xiàn)步驟

1.需求分析

全選按鈕——當(dāng)用戶(hù)點(diǎn)擊全選時(shí)，所有子列表都變?yōu)檫x中狀態(tài)，且全選按鈕的文字描述也會(huì)做相應(yīng)改變。
子列表按鈕——當(dāng)用戶(hù)選中所有子列表時(shí)，全選按鈕也會(huì)變成選中狀態(tài)。
反選按鈕——對(duì)子列表的選中狀態(tài)做相應(yīng)改變，例如：選中狀態(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>好再來(lái)</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西紅柿雞蛋</td>
                    <td>好再來(lái)</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>油炸榴蓮</td>
                    <td>好再來(lái)</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>清蒸助教</td>
                    <td>好再來(lái)</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>
        //獲取全選的這個(gè)復(fù)選框
        var ckAll = document.getElementById("j_cbAll");
        //獲取文字顯示span
        var txt = document.getElementById("txt");
        //獲取tbody中所有的小復(fù)選框
        var cks = document.querySelectorAll("#j_tb input");
        // console.log(cks);
        //點(diǎn)擊全選的這個(gè)復(fù)選框,獲取他當(dāng)前的狀態(tài),然后設(shè)置tbody中所有復(fù)選框的狀態(tài)
        ckAll.onclick = function () {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked;
            }
            //順便修改文本顯示
            txt.innerText = this.checked ? "全不選" : "全選";
        };
        //獲取tbody中所有的復(fù)選框,分別注冊(cè)點(diǎn)擊事件
        for (var i = 0; i < cks.length; i++) {
            // 此處了調(diào)用了下方封裝的函數(shù)對(duì)象，但未調(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();
        }
        // 代碼復(fù)用，函數(shù)封裝
        function fn() {
            var flag = true; //默認(rèn)都被選中了
            //判斷是否所有的復(fù)選框都選中
            for (var j = 0; j < cks.length; j++) {
                if (!cks[j].checked) {
                    flag = false;
                    break;
                }
            }
            //全選的這個(gè)復(fù)選框的狀態(tài)就是flag這個(gè)變量的值
            ckAll.checked = flag;
            //記得修改文本顯示
            txt.innerText = flag ? "全不選" : "全選";
        }
    </script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: