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

發(fā)布時間：2021-09-30 17:03:54 來源：億速云閱讀：149 作者：柒染欄目：開發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)JavaScript如何實現(xiàn)復(fù)選框全選或全取消操作，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

實現(xiàn)思路

1、獲取總選框、所有小選框元素對象
2、按鈕控制小按鈕- - -給總選框綁定onclick點擊事件，事件處理程序- - -for循環(huán)遍歷所有小選框，將總選框的- - -checked屬性值- - -賦值給它們
3、小按鈕影響總按鈕- - -for循環(huán) 給每個小復(fù)選框綁定點擊事件，每次點擊都 for循環(huán) 檢查所有的復(fù)選框是否被選中：
設(shè)置一個變量 flag 控制總按鈕的選中狀態(tài)，初始值為 true ，for循環(huán)遍歷檢查各小復(fù)選框選中狀態(tà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;

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

代碼示例

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

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

</html>

頁面效果：

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

以上就是JavaScript如何實現(xiàn)復(fù)選框全選或全取消操作，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

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

實現(xiàn)思路

代碼示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽