JavaScript實現複選框全選或全取消操作

本文例項為大家分享了 + element ui實現錨點定位的具體程式碼，供大家參考，具體內容如下

實現思路

1、獲取總選框、所有小選框元素物件
2、按鈕控制小按鈕- - -給總選框繫結onclick點選事件，事件處理程式- - -for迴圈遍歷所有小選框，將總選框的- - -checked屬性值- - -賦值給它們
3、小按鈕影響總按鈕- - -for迴圈給每個小複選框繫結點選事件，每次點選都 for迴圈檢查所有的複選框是否被選中：
設定一個變數 flag 控制總按鈕的選中狀態，初始值為 true ，for迴圈遍歷檢查各小複選框選中狀態，只要有一個沒有選上，flag = false，break 跳出迴圈不再檢查後面的小複選框狀態，最後總按鈕checked屬性值 = flag

注意：在html中選中狀態 checked = “checked”,但是在中，選中狀態- - -checked = true; 未選中狀態- - -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;
        }
        
      hdAVh 
  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>
 www.cppcns.com               </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; // 只要有一個小複選框沒有被選中，全選按鈕就沒被選中，可跳出迴圈，下面小複選框不用再判斷
     www.cppcns.com               }
                }
                all.checked = flag;
            }
        }
    </script>
</body>

</html>

頁面效果：

JavaScript實現複選框全選或全取消操作

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript實現複選框全選或全取消操作

實現思路

程式碼示例

JavaScript實現複選框全選或全取消操作

JavaScript實現複選框全選和取消全選

（排他思想）用Javascript實現複選框全選/反選功能

vue3 element-plus 樹狀表格無限層級複選框勾選取消實現

微信小程式如何實現radio單選框單擊打勾和取消

每日小記-切換選項卡時，保留複選框勾選

單選/複選框中點選文字能選擇該選項

JavaScript實現alert彈框效果

html自定義修改單選框多選框樣式以及獲取選中的值

javascript實現倒計時提示框

el-table多選框,只選一個的方法

JavaScript實現一個輸入框元件

JavaScript實現模態框拖拽效果

javascript 實現富文字框選中對齊

仿寫單選框/多選框

在子網劃分時，子網號為何不能是全0或全1？

Js實現複選框的全選、全不選反選功能程式碼例項

JQuery複選框全選效果如何實現

react實現複選框全選和反選元件效果

JavaScript-事件響應--複選框全選

JavaScript實現複選框全選或全取消操作

實現思路

程式碼示例

相關推薦