javascript如何實(shí)現(xiàn)全選

    
    
         
        .wrap{
            margin-left: 500px;
            margin-top: 200px;
        }
        table{
            border-collapse:collapse;
        }

        th{
            border:1px solid black;
            height: 45px;   
        }

        td{
            border:1px solid black;
            text-align: center;
            font-weight: bold;
        }
    


      
        
            
                
                    
                        
                    
                    商品
                    價(jià)格
                
            
            
                
                    
                        
                    
                    iPhone X
                    8000
                
                
                    
                        
                    
                    iPad pro
                    5000
                
                
                    
                        
                    
                    iPad air
                    2000
                
                
                    
                        
                    
                    Apple watch
                    2000
                

            
        
        
    

這里我已經(jīng)把鼠標(biāo)點(diǎn)擊事件的函數(shù)命名好了，全選叫“funcAll()”，單選叫“funcOne()”，反選叫“funcBackward()”。CSS部分主要給表單加上邊框，同時(shí)交接處邊框融合，基本就是最樸素的樣子。

先說第2條和第3條需求，邏輯相對(duì)簡(jiǎn)單：

用DOM方法分別獲取全選和單選的“input”元素，全選只有一個(gè)，直接用getElementById()就可以了（已經(jīng)提前設(shè)置好id），而單選有四個(gè)，用getElementByClassName()來獲?。ㄒ呀?jīng)提前設(shè)置好class），當(dāng)然獲取到的是一個(gè)數(shù)組。

講獲取到的元素都賦值給變量，然后用for循環(huán)遍歷數(shù)組，將全選的這個(gè)變量的checked屬性賦值給每個(gè)單選的變量的checked屬性。

此時(shí)，已經(jīng)同時(shí)解決2和3，代碼如下：

function funcAll(){
            var selectAll = document.getElementById('selectAll');
            var selectOnes = document.getElementsByClassName('selectOne');
            for (var i = 0; i < selectOnes.length; i++) {                 //循環(huán)遍歷，把全選框的值賦給每個(gè)單選框
                selectOnes[i].checked = selectAll.checked;             
            }
        }

接下來說第1條：“當(dāng)4行商品都被勾選上時(shí)，“全選”自動(dòng)被勾選上；當(dāng)有商品沒有被勾選時(shí)，“全選”自動(dòng)被取消?！?/p>

在這里，“全選”的狀態(tài)類似在監(jiān)聽其他所有按鈕，一旦有變化，隨之變化。所以這個(gè)邏輯要寫到每行商品單選按鈕的鼠標(biāo)點(diǎn)擊事件里。

我設(shè)置了一個(gè)變量isAllChecked作為橋梁，初始狀態(tài)將isAllChecked定義為true，循環(huán)遍歷每個(gè)單選按鈕，一旦檢測(cè)到有單選按鈕沒被勾選，就將isAllChecked置為false，跳出循環(huán)，并將isAllChecked的值賦給全選按鈕。

這樣一來，只要有一個(gè)單選按鈕沒被選中，就會(huì)將全選也變成未選中狀態(tài)。，代碼如下：

function funcOne(){                                                  
            var selectAll = document.getElementById('selectAll');            //函數(shù)作用域，所以得再定義一遍
            var selectOnes = document.getElementsByClassName('selectOne');
            var isAllChecked = true;                                        //定義一個(gè)變量作為橋梁來控制全選按鈕
            for (var i = 0; i < selectOnes.length; i++) {
                if (selectOnes[i].checked === false) {
                    isAllChecked = false;
                    break;
                }
            }
            selectAll.checked = isAllChecked;
        }

再來說說反選

1. 點(diǎn)擊反選按鈕，所有的單選按鈕狀態(tài)取反：選中的變成未選中，未選中的變成選中

2. 點(diǎn)擊反選，造成的結(jié)果，仍然能夠讓全選符合之前的邏輯。

第1條其實(shí)很好實(shí)現(xiàn)，點(diǎn)擊反選按鈕時(shí)，循環(huán)遍歷4個(gè)單選按鈕，將每個(gè)元素對(duì)應(yīng)的checked屬性取反即可。

但是，我們?cè)谇懊鎸?shí)現(xiàn)的全選監(jiān)聽所有單項(xiàng)，實(shí)際上是在每個(gè)單選按鈕的點(diǎn)擊事件里實(shí)現(xiàn)的，也就是說，如果我們不通過點(diǎn)擊單選按鈕來改變單選按鈕的狀態(tài)，全選實(shí)際上是監(jiān)聽不到全局的。

所以，我們可以把監(jiān)聽這部分的代碼再寫到反選的鼠標(biāo)點(diǎn)擊函數(shù)里去，最后的代碼如下：

            var selectAll = document.getElementById('selectAll');            //函數(shù)作用域，所以得再定義一遍
            var selectOnes = document.getElementsByClassName('selectOne');
            for (var i = 0; i < selectOnes.length; i++) {
                selectOnes[i].isAllChecked = !selectOnes[i].checked;
            }
            function funcOne(){};
            var isAllChecked = true;                                        //定義一個(gè)變量作為橋梁來控制全選按鈕
            for (var i = 0; i < selectOnes.length; i++) {
                if (selectOnes[i].checked === false) {
                    isAllChecked = false;
                    break;
                }
            }
            selectAll.checked = isAllChecked;
        }

最終的效果如下：

關(guān)于“javascript如何實(shí)現(xiàn)全選”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。