【原創】全選/取消全選-全選下的選項副作用於全選

功能實現：

1. 點擊全選，後面check項，所有勾選或者所有取消；（全選check 做用於 子check項）
2. 若是後面check項，所有勾選，全選check則勾選；（子check項 副作用於 全選check）
3. 若是後面check項，未所有勾選，全選check勾選狀態去掉；（子check項 副作用於 全選check）

先看截圖吧，

js以下： 

1. 定義成公共的函數，供須要相同功能的對象使用；（面向對象，對象類是一種優秀的編程思想，要逐步改掉面向過程的編程方式。）
2. 改變屬性最好使用prop
3. 特別注意：爲了代碼更完善，此js特別考慮了：check項對check全選的副作用。判斷條件是已選狀態的項和所有項來比較，
4. 在設置checkbox時，prop 比 attr 有更好的兼容性；
5. 在設置 checked ，「checked」方式不建議。兼容性更好的是checked，true，這點在w3c中明確表示checked的值是個布爾值。

$(function(){

        //全選與否
        function checkall(obj){
            obj.click(function(){
                if(obj.is(':checked')){
                    $(this).parent().next().find(":checkbox").prop("checked", true);
                }
                else{
                    $(this).parent().next().find(":checkbox").prop("checked", false);
                }
            });

            //子項反向做用到全選狀態
            var checkInSpan = obj.parent().next().find(":checkbox");
            checkInSpan.click(function(){
                var checkNum = obj.parent().next().find(":checkbox").length;
                var checkedNum = obj.parent().next().find("input:checked").length;
                if(checkedNum < checkNum){
                    obj.prop("checked", false);
                };
                if(checkedNum == checkNum){
                    obj.prop("checked", true);
                }
            })
        };

   
       //函數調用-服務類型
        var serviceTypeAll = $("#serviceTypeAll");
        checkall(serviceTypeAll);

       //函數調用-門店
        var storeAll = $("#storeAll");
        checkall(storeAll);


    })

html以下：

<div class="row">
    <div class="col-md-2 otoc-textright otoc-p-t-15">服務類型：</div>
    <div class="col-md-10  otoc-p-t-10">
        <div class="md-checkbox-inline">
            <div class="md-checkbox">
                <input type="checkbox" id="serviceTypeAll" class="md-check" >
                <label for="serviceTypeAll">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>所有
                </label>
            </div>
            <span> <!--包含子check項的容器-->
                <div class="md-checkbox">
                    <input type="checkbox" id="service01" class="md-check" >
                    <label for="service01">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>保養
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service02" class="md-check">
                    <label for="service02">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>洗車
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service03" class="md-check">
                    <label for="service03">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>維修
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service04" class="md-check">
                    <label for="service04">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>美容
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service05" class="md-check">
                    <label for="service05">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>事故
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service06" class="md-check">
                    <label for="service06">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>鈑噴
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service07" class="md-check">
                    <label for="service07">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>輪胎
                    </label>
                </div>
                <div class="md-checkbox">
                    <input type="checkbox" id="service08" class="md-check">
                    <label for="service08">
                        <span class="inc"></span>
                        <span class="check"></span>
                        <span class="box"></span>其餘
                    </label>
                </div>
            </span>
        </div>
    </div>
</div>
<div class="row">
	<div class="col-md-2 otoc-textright otoc-p-t-15">門店：</div>
	<div class="col-md-10 otoc-p-t-10">
    <div class="md-checkbox-inline">
        <div class="md-checkbox">
            <input type="checkbox" id="storeAll" class="md-check" >
            <label for="storeAll">
                <span class="inc"></span>
                <span class="check"></span>
                <span class="box"></span>所有
            </label>
        </div>
        <span>
            <div class="md-checkbox">
                <input type="checkbox" id="store01" class="md-check" >
                <label for="store01">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧車樂金水路店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store02" class="md-check" >
                <label for="store02">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧車樂車源店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store03" class="md-check" >
                <label for="store03">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧車樂西店店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store04" class="md-check" >
                <label for="store04">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧車樂梅林店
                </label>
            </div>
            <div class="md-checkbox">
                <input type="checkbox" id="store05" class="md-check" >
                <label for="store05">
                    <span class="inc"></span>
                    <span class="check"></span>
                    <span class="box"></span>氧車樂銳騎店
                </label>
            </div>
        </span>
    </div>
</div>
</div>

延伸話題：不受頁面dom佈局結構影響

此例以上的js代碼的弊端，雖然能夠實現全選/反選的功能，可是要嚴格遵照dom結構，這樣js才能順利找到對應的節點來操做。

 

完善後的js代碼以下：

//2個參數---不受頁面dom結構的變化影響
        //參數說明：
        //obj        : 爲全選check;
        //objChildren: 爲包含子checkbox的容器
        function otoc_checkall(obj,objChildren){
            obj.click(function(){
                if(obj.is(':checked')){
                    objChildren.find(":checkbox").prop("checked", true);
                }
                else{
                    objChildren.find(":checkbox").prop("checked", false);
                }
            });

            //子項反向做用到全選狀態
            var objChildren_all = objChildren.find(":checkbox");
            objChildren_all.click(function(){
                var checkNum = objChildren.find(":checkbox").length;
                var checkedNum = objChildren.find("input:checked").length;
                if(checkedNum < checkNum){
                    obj.prop("checked", false);
                };
                if(checkedNum == checkNum){
                    obj.prop("checked", true);
                }
            })
        };


		//引用
        var serviceTypeAll = $("#serviceTypeAll"); 
        var serviceTypeAll_children = $("#serviceTypeAll_children");
        otoc_checkall(serviceTypeAll,serviceTypeAll_children);