input全选与单选(把相应的value放入隐藏域去)

浏览数：42 / 时间：2015年06月09日

需求是：页面上有很多复选框，1.当我选择一项复选框时候把对应的值放入到隐藏域去 2.当我反选的时候把隐藏域对应的值删掉。3.当我全选的时候页面上所有的选择框的值一起放到隐藏域去，反之。4.当我已全选时候再删掉选择一项时候只是把对应的一项值删掉。

　　当我全选的时候：

对应于

当我没有全选的时候

对应于

HTML代码如下：

<div class="container">
        <div>全选<input type="checkBox" class="AllSelect"/></div>
        <div>
            <label><input type="checkbox" value="201399720559172" class="selector"/></label>
            <label><input type="checkbox" value="201399720559173" class="selector"/></label>
            <label><input type="checkbox" value="201399720559174" class="selector"/></label>
        </div>
    </div>
    <input id="boxFrom" type="hidden" value=""/>

JS代码如下：

var callback = (function(){

            function CheckBox(container){
                var self = this;
                
                if(this instanceof CheckBox) {

                    // 匹配传参数clickElem
                    if($.isPlainObject(container)){
                        this.container = container;
                    }else if(/^\./.test(container)){
                        this.container = $(container);
                    }else if(/^#/.test(container)){
                        this.container = $(container);
                    }else if($(‘.‘+container)){
                        this.container = $(‘.‘+container);
                    }else {
                        throw new Error(‘传递参数不符合!‘);
                    }
                }else {
                    new CheckBox(container);
                }
                
                $(this.container).click(function(e) {
                    var target = e.target;
                    if(target.type === ‘checkbox‘ && $(target).hasClass(‘selector‘)) {
                        self.itemSelect(target);
                    }else if (target.type === ‘checkbox‘ && $(target).hasClass(‘AllSelect‘)) {
                        self.allSelect(target);
                    }else {
                        new Error(‘没有找到相应的选项!‘);
                    }
                });
            }

            CheckBox.prototype = {

                constructor: CheckBox,

                _count: 0, // 计数器

                _arr: [],

                _itemArrs: [],

                _selectLen: $(‘.selector‘).length,

                itemSelect: function(target){
                    var self = this,
                        itemVal;
                    if(target.checked){
                        target.checked = true;
                        self._count++;
                        
                        // 当选中最后一个时候 全选复选框也选择上 
                        if(self._count >= self._selectLen) {
                            $(‘.AllSelect‘).attr(‘checked‘,true);
                        }
                        itemVal = $(target).attr(‘value‘);
                        
                        self._arr.push(itemVal);
                        
                        self.request(self._arr);
                    }else {
                        target.checked = false;
                        
                        if(self._count <= 0){
                            self._count = 0;
                        }else {
                            self._count--;
                        }
                        if(self._count < self._selectLen) {
                            $(‘.AllSelect‘).attr(‘checked‘,false);
                        }
                        itemVal = $(target).attr(‘value‘);
                        if(self._arr.length > 0) {
                            for(var i = 0, ilen = self._arr.length; i < ilen; i+=1) {
                                if(itemVal == self._arr[i]) {
                                    self.removeItem(self._arr[i],self._arr);
                                }
                            }
                        }
                        var curVal = self.unique(self._arr);
                        $(‘#boxFrom‘).attr(‘value‘,curVal);
                    }    
                },
                // 索引 jquery1.8 indexof 会重新排序 所以没有用jquery indexof
                indexOf: function(item,arr) {
                    if(Array.prototype.indexOf) {
                        return arr.indexOf(item);
                    }else {
                        for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
                            if(arr[i] == item) {
                                return i;
                            }else {
                                return -1;
                            }
                        }
                    }
                },
                // 从数组里面删除一项
                removeItem: function(item,arr){
                    var self = this,
                        index = self.indexOf(item,arr);
                    if(index > -1) {
                        arr.splice(index, 1);
                    }
                },
                
                // 全选
                allSelect: function(target){
                    var self = this;
                    if(target.checked) {
                        $(‘.selector‘).each(function(index,item){
                            item.checked = true;
                            var itemVal = $(item).attr(‘value‘);
                            self._arr.push(itemVal);
                        });
                        self.request(self._arr);
                    }else {
                        target.checked = false;
                        $(‘#boxFrom‘).attr(‘value‘,‘‘);
                        $(‘.selector‘).each(function(index,item){
                            item.checked = false;
                            self._count = 0;
                            self._arr = [];
                        });
                    }
                },
                
                //去掉数组重复项
                unique: function(arr){
                    arr = arr || [];
                    var obj = {},
                        ret = [];
                    for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
                        var curItem = arr[i],
                            curItemType = typeof(curItem) + curItem;
                        if(obj[curItemType] !== 1) {
                            ret.push(curItem);
                            obj[curItemType] = 1;
                        }
                    }
                    return ret;
                },

                // 处理业务逻辑
                request: function(arr){
                    var self = this;
                    if($.isArray(arr)){
                        var arr = self.unique(arr);
                        $(‘#boxFrom‘).attr(‘value‘,arr.join(‘,‘));
                    }else {
                        $(‘#boxFrom‘).attr(‘value‘,arr);
                    }
                }
            };

            return CheckBox;
        })();
        

        //调用如下
        new callback(‘.container‘);