input全選與單選(把相應的value放入隱藏域去)

框架是Jquery

 需求是： 頁面上有很多核取方塊，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');

 第二種JS如下：

/**
 * 全選 反選JS元件
 * author tugenhua
 * @time 2014-3-19
 * @requires{jQuery}
 * input核取方塊的結構 如：<input type="checkbox" data-id="" class="single-selector"/>
 */
 
 function CheckBox(options) {
     
     this.config = {
        allSelectId        : '#j-checkbox',        //全選ID
        singleSelectCls    : '.single-selector',   // 單選class
        noSelectId         : '#j-no-checkbox',     // 反選ID
        hiddenId           : '#boxFrom',           // 隱藏域 存放id
        singleCallBack     : null,                 // 單選後回撥函式
        cancelCallBack     : null,                 // 取消單選回撥函式
        allCallBack        : null,                 // 全選後回撥函式
        noSelectCallBack   : null                  // 反選後回撥函式
     };
     
     this.cache = {
        selectLen : 0
     };
     this._init(options);
     
 }
 
 CheckBox.prototype = {
     constructor: CheckBox, 
     _init: function(options){
         this.config = $.extend(this.config,options || {});
         
         var self = this,
              _config = self.config,
              _cache = self.cache;
         _cache.selectLen =  $(_config.singleSelectCls).length;
             
             /*
              * 全選功能
              * 沒有用事件代理
              */
            $(_config.allSelectId).unbind().bind('click',function(e){
                var target = e.target;
                self._allSelect(target);
            });
            
            // 單選
            $(_config.singleSelectCls).each(function(){
                $(this).unbind().bind('click',function(e){
                    var target = e.target;
                     self._itemSelect(target);
                })
            });
            
            // 反選
            $(_config.noSelectId).unbind().bind('click',function(e){
                var target = e.target;
                self._noSelect(target);
            });
     },
     _count: 0, // 計數器
     _arr: [],
     _itemArrs: [],
     _itemSelect: function(target){
            var self = this,
                _config = self.config,
                _cache = self.cache,
                itemVal,
                tagParent;
            if(target.checked){
                target.checked = true;
                self._count++;
                // 當選中最後一個時候 全選核取方塊也選擇上 
                if(self._count >= _cache.selectLen) {
                    $(_config.allSelectId).attr('checked',true);
                }
                
                itemVal = $(target).attr('data-id');
                self._arr.push(itemVal);
                self._request(self._arr);
                
                // 單選後 回撥 引數為點選後的id
                _config.singleCallBack && 
                $.isFunction(_config.singleCallBack) && 
                _config.singleCallBack(itemVal);
            }else {
                target.checked = false;
                
                if(self._count <= 0){
                    self._count = 0;
                }else {
                    self._count--;
                }
                if(self._count < _cache.selectLen) {
                    $(_config.allSelectId).attr('checked',false);
                    $(_config.noSelectId).attr('checked',false);
                }
                itemVal = $(target).attr('data-id');
                self._arr = self.unique(self._arr);
                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);
                        }
                    }
                }
                self._request(self._arr);
                // 取消單選後 回撥 引數為點選後的id
                _config.cancelCallBack && 
                $.isFunction(_config.cancelCallBack) && 
                _config.cancelCallBack(itemVal);
            }    
        },
     // 索引 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,
                _config = self.config,
                tagParent,
                itemVal;
                $(_config.singleSelectCls).each(function(index,item){
                    item.checked = true;
                    itemVal = $(item).attr('data-id');
                    self._arr = self.unique(self._arr);
                    self._arr.push(itemVal);
                });
                self._request(self._arr);
                
                // 全選後 回撥 引數為所有的id
                _config.allCallBack && 
                $.isFunction(_config.allCallBack) && 
                _config.allCallBack(self.unique(self._arr));
        },
        // 反選
        _noSelect: function(target){
            var self = this,
                _config = self.config;
            $(_config.allSelectId).attr("checked",false);
            $(_config.singleSelectCls).each(function(index,item){
                if($(item).attr('checked') == 'checked') {
                    $(item).attr('checked',false);
                    var itemVal = $(item).attr('data-id');
                    self._arr = self.unique(self._arr);
                    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);
                            }
                        }
                    }
                    self._request(self._arr);
                }else {
                    $(item).attr('checked',true);
                    var itemVal = $(item).attr('data-id');
                    
                    self._arr.push(itemVal);
                    
                    var curVal = self.unique(self._arr);
                    $(_config.hiddenId).attr('value',curVal);
                }
            });
            self._request(self._arr);
            
            // 反選後 回撥 引數為所有的id
            _config.noSelectCallBack && 
            $.isFunction(_config.noSelectCallBack) && 
            _config.noSelectCallBack(self.unique(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,
                _config = self.config;
            if($.isArray(arr)){
                var arr = self.unique(arr);
                $(_config.hiddenId).attr('value',arr.join(','));
            }else {
                $(_config.hiddenId).attr('value',arr);
            }
        }
 };