多選框全選與全不選的實現

多選框全選與全不選是前端開發人員必學的案例了，這裡完成了以下需求：

• 當用戶勾上“全選”時，自動選中所有語言，並把“全選”變成“全不選”；
• 當用戶去掉“全不選”時，自動不選中所有語言；
• 當用戶點擊“反選”時，自動把所有語言狀態反轉（選中的變為未選，未選的變為選中）；
• 當用戶把所有語言都手動勾上時，“全選”被自動勾上，並變為“全不選”；
• 當用戶手動去掉選中至少一種語言時，“全不選”自動被去掉選中，並變為“全選”。

網頁代碼部分如下：

<form id="test-form" action="test">
    <legend>請選擇想要學習的編程語言：</legend>
    <fieldset>
        <p>
            <label class="selectAll">
                <input type="checkbox">
                <span class="selectAll">全選</span>
                <span class="deselectAll">全不選</span>
            </label>
            <a href="#0" class="invertSelect">反選</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p>
            <button type="submit">Submit</button>
        </p>
    </fieldset>
</form>

先獲取dom元素

var
        form = $('#test-form'),
        langs = form.find('[name=lang]'),
        selectAll = form.find('label.selectAll :checkbox'),
        selectAllLabel = form.find('label.selectAll span.selectAll'),
        deselectAllLabel = form.find('label.selectAll span.deselectAll'),
        invertSelect = form.find('a.invertSelect');

全選與全不選實現起來很簡單,利用jquery對象的prop方法來設置選中狀態，需要注意的是這裡不能使用attr()方法：

 // 全選與全不選
        selectAll.on("change",()=>{
            if(selectAll.prop("checked")) {
                //全選
                langs.prop("checked",true)
                selectAllLabel.hide()
                deselectAllLabel.show()
            }else{
                // 全不選
                langs.prop("checked",false)
                selectAllLabel.show()
                deselectAllLabel.hide()
            }
            
        })

反選的方法也很簡單：

        invertSelect.on("click",()=>{
            //jquery對象要先使用Array.from方法轉換成數組，利用數組來遍歷
            //需要注意的是，遍歷的每一個元素是dom對象，而不是jquery對象了,
            //不能再使用prop方法了
            Array.from(langs).forEach(item=>item.checked=!item.checked)
        })

當用戶把所有語言都手動勾上時，“全選”被自動勾上，並變為“全不選”。實現這個需求，需要讓change事件綁定所有的name為lang的checkbox對象（langs）,事件觸發時，要遍歷所有的langs,如果全部為選中狀態，則“全選”自動勾上，並變為“全不選”。這裡獲取所有的選中狀態的checkbox,可以使用 $(‘[name=lang]:checked’),代碼如下：

    var langsChecked = $('[name=lang]:checked')
     //如果選中的checkbox數量大於等於5，即是全部選中
    if(langsChecked.length>=5){
        //全選打勾
        selectAll.prop("checked",true)
        //全選標籤隱藏
        selectAllLabel.hide()
        //全不選標籤顯示
        deselectAllLabel.show()
    }else{
        //全選去掉勾
        selectAll.prop("checked",false)
        //全選標籤顯示
        selectAllLabel.show()
        //全不選標籤隱藏
        deselectAllLabel.hide()
    }

為避免與之前的代碼顯示衝突，這裡封裝為一個方法，前面的代碼也需要使用該方法,完整代碼如下：

 $(function(){
    var
        form = $('#test-form'),
        langs = form.find('[name=lang]'),
        selectAll = form.find('label.selectAll :checkbox'),
        selectAllLabel = form.find('label.selectAll span.selectAll'),
        deselectAllLabel = form.find('label.selectAll span.deselectAll'),
        invertSelect = form.find('a.invertSelect');

        // 全選與全不選
        selectAll.on("change",()=>{
            if(selectAll.prop("checked")) {
                //全選
                langs.prop("checked",true)
                selectAllLabel.hide()
                deselectAllLabel.show()
            }else{
                // 全不選
                langs.prop("checked",false)
                selectAllLabel.show()
                deselectAllLabel.hide()
            }
            select()
        })
        //反選
        invertSelect.on("click",()=>{
            //jquery對象要先使用Array.from方法轉換成數組，利用數組來遍歷
            //需要注意的是，遍歷的每一個元素是dom對象，而不是jquery對象了,
            //不能再使用prop方法了
            Array.from(langs).forEach(item=>item.checked=!item.checked)
            select()
        })
        //當用戶把所有語言都手動勾上時，“全選”被自動勾上，並變為“全不選”；
        //當用戶手動去掉選中至少一種語言時，“全不選”自動被去掉選中，並變為“全選”。
        function select(){
            var langsChecked = $('[name=lang]:checked')
            console.log(langsChecked)
            //如果選中的checkbox數量大於等於5，即是全部選中
            if(langsChecked.length>=5){
                selectAll.prop("checked",true)
                selectAllLabel.hide()
                deselectAllLabel.show()
            }else{
                selectAll.prop("checked",false)
                selectAllLabel.show()
                deselectAllLabel.hide()
            }
        }

        langs.change(select)

})