一行jQuery代碼搞定checkbox 全選和全不選

網站建設中；

讓復選框全部選中和全部取消是比較常用的；

下面就介紹如何用一句話搞定全選功能；

其實很簡單；

代碼在下面;

JavaScript部分：

function checkAll(obj){
 $("#box input[type='checkbox']").prop('checked', $(obj).prop('checked'));
}

html部分：

選框全選與全不選的實現

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

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

網頁代碼部分如下：

<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)

})

如有疑問，歡迎在評論區留言。

店鋪復制新版運費模板

一、提取運費模板代碼

1、打開店鋪，復制鏈接https://freighttemplate.aliexpress.com/wsproduct/freight/freightTemplateList.htm?spm=5261.newworkbench.aenewheader.6.32e93e5fAZ02G2 回歸老版運費模板，找到需要復制的運費模板：

2、點編輯，按F12,然后Ctrl+F 輸入economy-logistics-panel，右鍵點擊此行代碼，并點擊 Edit as Html

全選這個方框里面的東西，復制出來保留為txt文本命名為economy-logistics-panel，如果物流模板沒有更新，這個文件就持續使用

3、一共需要復制經濟類（economy-logistics-panel）、簡易類（simple-logistics-panel）、標準類（standard-logistics-panel）、快速類（express-logistics-panel）、其他物流（other-logistics-panel）這5個版塊的代碼，復制好的代碼分別粘貼到5個txt文本文件里。

4、第一步提取運費模板代碼工作完成！

二、跨店鋪復制運費模板

1、打開需要復制運費模板的店鋪，復制鏈接：https://freighttemplate.aliexpress.com/wsproduct/freight/freightTemplateList.htm?spm=5261.newworkbench.aenewheader.6.32e93e5fAZ02G2

2、進入老版運費模板編輯，新建一個運費模板，輸入運費模板名字（不能中文）按F12，再按Ctrl+F 輸入economy-logistics-panel，右鍵點擊Editas Html,分別用之前復制好的代碼去替換，經濟類、簡易類、標準類、快速類和其他類物流這5個板塊的代碼，(每次復制目的代碼進去，一定要點一個代碼欄的空白地方)。

全選方框內容，用之前保留的文本替換

再按一次F12，關閉代碼，查看模板是否有更新

3、替換好后，點擊左邊保存按鈕。有時候可能要多點幾次保存。

在線咨詢

上一篇：Apache Storm v2.0入門項目的開發、測試和運行（IDEA/Maven）
下一篇：html自學教程（二）html段落與文本格式化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一行jQuery代碼搞定checkbox 全選和全不選

選框全選與全不選的實現

店鋪復制新版運費模板

您的項目需求