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

最新推荐文章于 2025-06-07 22:15:50 发布

weixin_33826609

最新推荐文章于 2025-06-07 22:15:50 发布

阅读量155

点赞数

文章标签： javascript ViewUI

本文介绍了一种使用jQuery实现复选框与隐藏域交互的方法。具体包括单选、全选、反选功能及与隐藏域之间的联动更新。通过自定义函数实现了选择状态的跟踪与处理。

框架是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);
            }
        }
 };