js實現全選反選

在前端中用到全選反選的案例並不少，在這裡呢我就實現這個功能給大家參考參考。

這裡呢就先貼上我的html和css代碼

<div class="wrap">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="theadInp" />
                        </th>
                        <th>快遞</th>
                        <th>收件人</th>
                        <th>電話</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>順豐</td>
                        <td>張大大</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>韻達</td>
                        <td>張全蛋</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>圓通</td>
                        <td>韓非</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>中國郵政</td>
                        <td>衛莊</td>
                        <td>186*****897
                    </tr>
                </tbody>
            </table>
        </div>

這是html部分的，下麵呢，我附上css部分的代碼：

    * {
                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:rgb(51, 199, 18);
                font: bold 16px "微軟雅黑";
                color: #fff;
            }
            
            td {
                font: 14px "微軟雅黑";
            }
            
            tbody tr {
                background-color: #f0f0f0;
            }
            
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }

展示出來的佈局是這樣的：

好了，下麵我們就開始講重點把，做之前的呢，一定要理清思路，只有理清思路的才能好下手做啊

我們要通過點擊第一個input標簽來改變所有input標簽的選擇狀態，

1.首先要獲取到控制總選擇狀態的input標簽，我們命名為inputAll

2.然後把每個input標簽存到一個數組中去，我們命名為icheck

3.點擊inputAll來改變狀態，並且讓icheck裡面的input能跟著他的狀態來變化

代碼如下：

window.onload = function() {
                //先獲得控制全選反選的input標簽
                var inputAll = document.getElementById("theadInp");
                //獲得tbody
                var tbody = document.getElementById("tbody");
                //獲得天tbody裡面的子元素
                var icheck = tbody.getElementsByTagName("input");
                console.log(icheck);
                //給控制全選反選的input標簽綁定事件
                inputAll.onclick = function() {
                    //遍歷tbody裡面的input標簽，把inputAll的狀態賦值給icheck
                    for(var i = 0; i < icheck.length; i++) {
                        icheck[i].checked = this.checked;
                    }
                }

上面都有寫註釋，大家肯定都能看的懂的，也沒難點，就不需要解釋了。

看下麵：

以為這樣就結束了事了嗎？然而並沒有。裡面還是有個小問題的，就是當下麵的input有一個以上沒選中的時候，那麼inputAll的狀態也必須要跟著變化，總不能只讓人家聽他一個人的話吧，這就太不像話了。

for(var i = 0; i < icheck.length; i++) {
                    //給每個子元素都綁定事件
                    icheck[i].onclick = function() {
                        //點擊的時候在遍歷icheck，看看是否有沒選中的
                        for(var j = 0; j < icheck.length; j++) {
                            //定義一個標誌來記錄
                            var flag = true;
                            if(icheck[j].checked == false) {
                                flag = false;
                            }
                        }
                        inputAll.checked=flag;
                    }
                }

現在這樣才是真的完事了，這樣才是真的完美解決了。大家可以自己試試。lz要去減肥去了