js和jq實現全選反選

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

這里呢就先貼上我的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;
                    }
                }

jq實現方法:

是不是覺得js實現起來特別的繁瑣,沒關系,我們有更加簡單的實現辦法,那就jq來實現

$(function() {
                //實現全選反選
                $("#theadInp").on('click', function() {
                    $("tbody input:checkbox").prop("checked", $(this).prop('checked'));
                })
                $("tbody input:checkbox").on('click', function() {
                    //當選中的長度等於checkbox的長度的時候,就讓控制全選反選的checkbox設置為選中,否則就為未選中
                    if($("tbody input:checkbox").length === $("tbody input:checked").length) {
                        $("#theadInp").prop("checked", true);
                    } else {
                        $("#theadInp").prop("checked", false);
                    }
                })
            })

看,jq方法是不是簡單的太多了,所以呢,能用jq就別人js實現了