input全选与单选(把相应的value放入隐藏域去)
2013-08-30 14:09 龙恩0707 阅读(1560) 评论(0) 编辑 收藏 举报框架是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); } } };