2. 程式人生 > 其它 >（排他思想）用Javascript實現複選框全選/反選功能

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

阿新 • • 發佈：2021-01-31

技術標籤：JScssjavascripthtml5html

用Javascript實現複選框全選/反選功能

正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

在我們實際的專案之中，經常會遇見一些選擇框，這些選擇框有個全選的選擇框，點選過後便會選擇後面所有的選擇框，當再一次點選全選框時，所有選擇的複選框又都會變成未選擇的狀態。 不點選全選框，當點選完其他的選擇框時，全選框也會自動被選擇。

程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=
 
"UTF-8">
    <title>Title</title>
    <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 "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>商品</th>
            <th>價錢</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>

        </tbody>
    </table>
</div>
<script>
    var j_cball=document.getElementById('j_cbAll')//全選按鈕
    var j_tbs=document.getElementById('j_tb').getElementsByTagName('input')//下面所有的複選框
    j_cball.onclick=function () {
        console.log(this.checked)//true/false
        for (var i=0;i<j_tbs.length;i++){
            j_tbs[i].checked=this.checked
        }
    }
    for (var i=0;i<j_tbs.length;i++){
        j_tbs[i].onclick=function () {
            var flag=true
            for (var i=0;i<j_tbs.length;i++){
                if (!j_tbs[i].checked){
                    flag=false
                    break
                }
            }
            j_cball.checked=flag
        }
    }
</script>
</body>
</html>

效果展示

未點選時：
在這裡插入圖片描述

點選頂部全選框時

在這裡插入圖片描述

當有一個子級複選框未選中時，全選框便不會被勾選

在這裡插入圖片描述

程式碼解釋：

這裡的關鍵就是最上面的全選框和下面的複選框兩部分。給全選框設定一個點選事件onclick，當它checked時，返回的是ture，然後這時，我們就可以進行遍歷，將下面的N個子級複選框的checked值都逐一遍歷設定成true，當然，全選框未選中時為false，下面的選擇框也會遍歷為false。這是操作全選框時的思路。

接下來就是子選框的思路：我們需要把子選框全部勾選才能讓全選框被勾選，那麼也需要進行遍歷檢查每個子選框的checked值。我對自選框進行編號，當觸發點選事件時，定義flag初值為true。然後便開始進行遍歷檢查，從第0個選擇框開始檢查，這裡的！j_tbs【i】.checked的意思的第i個選擇框checked的值為false，如果成立，那麼將flag的值改為false，然後break退出檢查的這個迴圈，因為已經有一個的checked值為false，所有不管後面的值是什麼，都不會改變flag的值，所有再進行檢查就是無意義的，所有直接break退出迴圈。意思是檢查到第i個框發現它沒有被選擇，那麼全選框也不應該被選擇，所以flag的值被改為false，又將這個flag的值傳給全選框。

別噴我，寫的不好就勞煩指點一二，覺得有幫助就留下個大拇指點個關注再走哈哈哈！

相關推薦

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

技術標籤：JScssjavascripthtml5html 用Javascript實現複選框全選/反選功能 正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

OpenGL學習（十一）-- 用 GLSL 實現載入圖片

我的 OpenGL 專題學習目錄，希望和大家一起學習交流進步！ OpenGL學習（一）-- 術語瞭解

怎樣用Javascript實現函式柯里化與反柯里化

函式柯里化（黑人問號臉）？？？Currying（黑人問號臉）？？？妥妥的中式翻譯既視感；下面來一起看看究竟什麼是函式柯里化：

用 javascript 實現玫瑰花（一支）

玫瑰花的定義 玫瑰（學名：Rosa rugosa Thunb.）：原產地中國。屬薔薇目，薔薇科落葉灌木，枝杆多針刺，奇數羽狀複葉，小葉5-9片，橢圓形，有邊刺。花瓣倒卵形，重瓣至半重瓣，花有紫紅色、白色，果期8-9月，扁球形

用Javascript實現點選input輸入框後輸入框的提示文字消失,並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

技術標籤：JScsshtmljavascript 用Javascript實現點選input輸入框後輸入框的提示文字消失。並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

關鍵詞匹配優化（第2篇）—— 用C#實現demo

上一篇文章用python實現了計算文字相似度計算的過程，這次用C#做個demo。 不得不說用python是真的方便，不懂計算過程也能實現結果。C#也有類似NumPy的庫：NumSharp。經過測試還是有區別的，有些功能沒有（也可能是因

（一）用go實現單鏈表

本篇，我們用go簡單的實現單鏈表這種資料結構。 1.節點定義 type Node struct{ data int

JavaScript實現簡易購物車最全程式碼解析（ES6面向物件）

本文例項為大家分享了實現簡易購物車的具體程式碼，供大家參考，具體內容如下

JavaScript實現簡易放大鏡最全程式碼解析（ES5）

本文例項為大家分享了實現簡易放大鏡的具體程式碼，供大家參考，具體內容如下

b_lc_實現除法（倍增思想）

給定兩個整數，被除數 dividend 和除數 divisor。將兩數相除，要求不使用乘法、除法和 mod 運算子。

（三）用go實現平衡二叉樹

本篇，我們用go簡單的實現平衡二叉查詢樹。具體原理參考大佬部落格即可：AVL樹(一)之 圖文解析 和 C語言的實現

Spring Boot入門系列（十六）使用pagehelper實現分頁功能

之前講了Springboot整合Mybatis，然後介紹瞭如何自動生成pojo實體類、mapper類和對應的mapper.xml 檔案，並實現最基本的增刪改查功能。接下來要說一說Mybatis 的分頁功能：使用Mybatis-PageHelper外掛，實現分頁功能

邏輯式程式語言極簡實現（使用C#） - 4. 程式碼實現（完結）

本文是本系列的完結篇。本系列前面的文章： 邏輯式程式語言極簡實現（使用C#） - 1. 邏輯式程式語言介紹

pytest（十五）--用例a失敗，跳過測試用例b和c並標記失敗xfail

前言 當用例a失敗的時候，如果用例b和用例c都是依賴於第一個用例的結果，那可以直接跳過用例b和c的測試，直接給他標記失敗xfail

棧（c語言）連結串列實現

節點的結構 struct Node { int value; struct Node* next; }; typedef struct Node Node; 基本功能和操作演示

特徵選取之IV（資訊值）及python實現

IV表徵特徵的預測能力：小於0.02，幾乎沒有預測能力；小於0.1，弱；小於0.3，中等；小於0.5，強；大於0.5，難以置信，需進一步確認

手風琴特效這麼颯，能用 JavaScript 實現嗎？

實驗介紹 手風琴效果一直是比較流行的頁面特效之一，本節課將會帶大家看一個不一樣的手風琴效果，通過 JavaScript 實現全屏手風琴。最終效果如下：

用JavaScript實現漢字與Unicode的相互轉換

一、將漢字轉換為Unicode /* *將漢字轉換為Unicode *charCodeAt返回字串指定位置的字元的Unicode編碼（十進位制形式），在0-65535之間。 * *toString(16) 將一個數字轉成十六進位制。 */function toUnicode(chineseS

用JavaScript實現貪吃蛇遊戲

本文例項為大家分享了JavaScript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

spring-boot-route（二十）Spring Task實現簡單定時任務

Spring Task是Spring 3.0自帶的定時任務，可以將它看作成一個輕量級的Quartz，功能雖然沒有Quartz那樣強大，但是使用起來非常簡單，無需增加額外的依賴，可直接上手使用。