API Docs for: 0.1
Show:

File: ../comps/Form/UXC.Form.initCheckAll.js

 ;(function($){
    /**
     * 初始化 checkbox 全选反选功能
     * <br />只要引用本脚本, 页面加载完毕时就会自动初始化全选反选功能
     * <br /><br />动态添加的 DOM 需要显式调用 UXC.Form.initCheckAll( domSelector ) 进行初始化
     * <br /><br />要使页面上的全选反选功能能够自动初始化, 需要在全选反选按钮上加入一些HTML 属性
     * <br /><b>checktype</b>: all | inverse, all=全选/全不选, inverse=反选
     * <br /><b>checkfor</b>: selector, 要全选/反选的 checkbox 选择器语法
     * <br /><b>checkall</b>: selector, 全选按钮的选择器, 这个只有反选按钮需要, 反选时变更全选按钮的状态
     * @method  initCheckAll
     * @static
     * @for UXC.Form
     * @version dev 0.1
     * @author  qiushaowei   <suches@btbtd.org> | 360 UXC-FE Team
     * @date    2013-06-11
     * @param   {selector}  _selector   要初始化的全选反选的父级节点
     * @example
            <h2>AJAX data:</h2>
            <dl class="def example24">
                <dt>checkall example 24</dt>
                <dd>
                <input type="checkbox" id="checkall24" checktype="all" checkfor="dl.example24 input[type=checkbox]"><label for="checkall24">全选</label>
                <input type="checkbox" id="checkall24_inverse" checktype="inverse" checkfor="dl.example24 input[type=checkbox]" checkall="dl.example24 input[checktype=all]"><label for="checkall24_inverse">反选</label>
                </dd>
                <dd>
                <input type="checkbox" id="checkall24_1" value="" name="" checked />
                <label for="checkall24_1">checkall24_1</label>
                <input type="checkbox" id="checkall24_2" value="" name="" checked />
                <label for="checkall24_2">checkall24_2</label>
                <input type="checkbox" id="checkall24_3" value="" name="" checked />
                <label for="checkall24_3">checkall24_3</label>
                <input type="checkbox" id="checkall24_4" value="" name="" checked />
                <label for="checkall24_4">checkall24_4</label>
                <input type="checkbox" id="checkall24_5" value="" name="" checked />
                <label for="checkall24_5">checkall24_5</label>
                </dd>
            </dl>

            <script>
            $(document).delegate( 'button.js_ajaxTest', 'click', function(){
                var _p = $(this);
                _p.prop('disabled', true);
                setTimeout( function(){ _p.prop('disabled', false); }, 1000 );

                $.get( './data/initCheckAll.php?rnd='+new Date().getTime(), function( _r ){
                    var _selector = $(_r);
                    $( $( 'body' ).children().first() ).before( _selector );
                    UXC.Form.initCheckAll( _selector );
                });
            });
            </script>
     */
    UXC.Form.initCheckAll = 
        function( _selector ){
            _selector = $( _selector );
            var _ls = _selector.find( 'input[type=checkbox][checktype][checkfor]' );
            _ls.each( function(){
                var _p = $(this)
                    , _type = _p.attr('checktype').toLowerCase()
                    , _for = _p.attr('checkfor');
                if( _type != 'all' || !_for ) return;
                fixCheckAllStatus( _p, _for );

                if( !_p.data('initedCheckall') ){
                    _p.data('initedCheckall', true);
                    $(document).delegate( _for, 'click', function( _evt ){
                        var _sp = $(this);
                        if( isControler( _sp ) ) return;
                        fixCheckAllStatus( _p, _for );
                    });
                }
            });
        };

    $(document).ready( function( _evt ){
        UXC.Form.initCheckAll( $(document) );
    });
    /**
     * 监听 全选/反选 按钮的点击事件
     */
    $(document).delegate( 'input[type=checkbox][checktype][checkfor]', 'click', function( _evt ){
        var _p = $(this)
            , _type = _p.attr('checktype').toLowerCase()
            , _for = _p.attr('checkfor');
            UXC.log( _type, _for );

        switch( _type ){
            case 'all':
                {
                    $(_for).each( function(){
                        var _sp = $(this);
                        if( isControler( _sp ) ) return;
                        if( _sp.is( '[disabled]' ) ) return;
                        _p.prop('checked') && _sp.prop('checked', true);
                        !_p.prop('checked') && _sp.prop('checked', false);
                        
                    });
                    break;
                }

            case 'inverse':
                {
                    $(_for).each( function(){
                        var _sp = $(this);
                        if( isControler( _sp ) ) return;
                        if( _sp.is( '[disabled]' ) ) return;
                        if( _sp.prop('checked') ) _sp.prop('checked', false);
                        else _sp.prop('checked', true);
                    });

                    if( _p.is('[checkall]') ) fixCheckAllStatus( _p.attr('checkall'), _for );
                    break;
                }
        }
    });
    /**
     * 判断 input 是否为 全选反选 按钮
     */
    function isControler( _selector ){
        _selector = $( _selector );
        return _selector.is( '[checktype]' ) && _selector.is( '[checkfor]');
    }
    /**
     * input 改变状态时, 全选按钮也改为正确的状态
     */
    function fixCheckAllStatus( _all, _for ){
        var _isAll = true, _all = $(_all), _for = $(_for);
        _for.each( function(){
            var _sp = $(this);
            if( isControler( _sp ) ) return;
            if( _sp.is( '[checktype]' ) || _sp.is( '[checkfor]') ) return;
            if( !_sp.prop('checked') ) return _isAll = false;
        });
        UXC.log( '_isAll: ', _isAll );
        _all && _all.length && _all.prop( 'checked', _isAll );
    }
}(jQuery));