【原创】全选/取消全选-全选下的选项副作用于全选

时间 2019-11-13

标签原创全选取消选项作用于繁體版

原文原文链接

功能实现：

点击全选，后面check项，所有勾选或者所有取消；（全选check 做用于子check项）
若是后面check项，所有勾选，全选check则勾选；（子check项 副作用于 全选check）
若是后面check项，未所有勾选，全选check勾选状态去掉；（子check项 副作用于 全选check）

先看截图吧，javascript

js以下： html

定义成公共的函数，供须要相同功能的对象使用；（面向对象，对象类是一种优秀的编程思想，要逐步改掉面向过程的编程方式。）
改变属性最好使用prop
特别注意：为了代码更完善，此js特别考虑了：check项对check全选的副作用。判断条件是已选状态的项和所有项来比较，
在设置checkbox时，prop 比 attr 有更好的兼容性；
在设置 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以下：java

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