S全选功能代码

JS全选功能代码优化

2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑

JS全选功能代码优化

最近在看javascript MVC那本书，也感觉到自己写的代码也并不优雅，所以一直在想用另一种模式来编写JS代码，所以针对之前的简单的JS全选功能来做个简单的demo，使用目前现在的编码方式来重新编码，当然以后会一直用这种方式来编写自己的代码。下面是如下代码：

JS所有代码：

/**

 * JS全选

 * @class Checkall

 * @param {Object} cfg

 * @param {Element|selector} [cfg.container] 限定全选的容器

 * @param {selector} cfg.checkAll 全选框

 * @param {selector} cfg.checkItem 子选框

 */

 function CheckAll(cfg,callback) {

    var self = this;

    this.config = cfg;

    this.container = $(cfg.container) || document.body;

    // 全选自定义事件

    this.container.delegate(cfg.checkAll,'change',function(e){

        $(e.target).trigger('checkAllChange');

    });

    // 单选自定义事件

    this.container.delegate(cfg.checkItem,'change',function(e){

        $(e.target).trigger('checkItemChange');

    });

    // 全选操作

    this.container.delegate(cfg.checkAll,'checkAllChange',function(e){

        var checked = self.isItemChecked(e.target);

        self._checkAll(checked);

        // 选中所有子节点

        self._AllChildrenChecked(checked);

        callback && $.isFunction(callback) && callback(self);

    });

    // 单选操作

    this.container.delegate(cfg.checkItem,'checkItemChange',function(e){

        // 检查是否所有子节点都选中了

        if( self._isChildrenChecked()){

            self._checkAll(true);

        }

        else {

            self._checkAll(false);

        }

        callback && $.isFunction(callback) && callback(self);

    });

 };

 $.extend(CheckAll.prototype,{

    /*

     * 选中单个checkbox

     * @param item

     * @param _isCheck

     */

    _checkItem: function(item, _isCheck ){

        item = $(item);

        item.prop('checked', _isCheck);

    },

    /*

     * 选中/反选所有的 全选按钮

     * @method _checkAll {private}

     * @param {Boolean} _isCheck

     */

    _checkAll: function(_isCheck){

        var self = this;

        this.container.find(self.config.checkAll).each(function(index,item){

            var isAllChecked = self.isItemChecked(item);

            if(isAllChecked !== _isCheck) {

                 self._checkItem(item,_isCheck);

            }

        });

    },

    /*

     * 选中/反选 所有的子节点

     * @method _AllChildrenChecked {private}

     */

     _AllChildrenChecked: function(_isCheck){

        var self = this;

        this.container.find(this.config.checkItem).each(function(index,item){

            var itemChecked = self.isItemChecked(item);

            if( itemChecked !== _isCheck){

                self._checkItem(item, _isCheck);

            }

        });

     },

    /*

     * 是否所有的子节点都选中了

     */

    _isChildrenChecked: function(){

        var isCheckAll = true;

        var self = this;

        this.container.find(this.config.checkItem).each(function(index,item){

            if(!self.isItemChecked(item)) {

                isCheckAll = false;

            }

        });

        return isCheckAll;

    },

    /*

     * 检查一个元素是否被选中

     */

     isItemChecked: function(item) {

        return $(item).is(":checked");

     },

     /*

      * 获取被选中的所有值 或者 属性 存入数组

      * @todo 比如想获取选中所有项的id或者其他所有项的属性等操作

      * @method getValues {public}

      * @param {elems,attr} 元素所有的dom节点 获取元素对应的属性值

      * @return 返回数组 {rets}

      */

     getValues: function(elems,attr) {

        var self = this,

            rets = [];

        $(elems).each(function(index,item){

            var isboolean = self.isItemChecked(item);

            if(isboolean && $(item).prop(attr)) {

                var curAttr = $(item).prop(attr);

                rets.push(curAttr);

            }

        });

        return rets;

     }

 });

HTML代码如下：

<div class="check-list">

    <hr>

    <div class="J_CheckListContainerBasic">

        <h4>基本使用</h4>

        <div class="check-all">

            <label>全选 <input type="checkbox" class="J_CheckAll"></label>

            <ul class="sub-checkbox">

                <li><label>选中 <input type="checkbox" class="J_CheckItem" value="1"></label></li>

                <li><label>选中 <input type="checkbox" class="J_CheckItem" value="2"></label></li>

                <li><label>选中 <input type="checkbox" class="J_CheckItem" value="3"></label></li>

            </ul>

        </div>

    </div>

</div>

JS初始化如下：

var checkAll=  new CheckAll({

            container: '.J_CheckListContainerBasic',

            checkAll: '.J_CheckAll',

            checkItem: '.J_CheckItem'

        },function(){

            console.log(checkAll.getValues('.J_CheckItem',"value"));

        });

当然为了查看效果，我也提供了JSFIddler地址供预览：

JS全选功能演示

分类: javascript

标签: JS全选功能代码优化

巴特西

S全选功能代码

JS全选功能代码优化

最新文章

热门文章