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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

框架是Jquery

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

当我全选的时候：

对应于

当我没有全选的时候

对应于

HTML代码如下：

JS代码如下：

第二种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);
}
}
};