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

input全选与单选(把相应的value放入隐藏域去)的更多相关文章

  1. jq pagination分页 全选、单选的思考

    $().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...

  2. vue分页全选和单选操作

    <!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...

  3. 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo

    提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...

  4. angular实现表格的全选、单选、部分删除以及全部删除

    昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...

  5. checked 完整版全选,单选,反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

  6. 页内多个input全选不干扰且只用一段代码。

    //html内容 <body> <div id="d1"> <input type="checkbox" class=" ...

  7. 关于input全选反选恶心的异常情况

    上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...

  8. 全选与单选chekbox的自定义实现(angular框架)

    2017年7月4日,我原本可以像其他同时一样早点回家,玩几把王者荣耀,但是我没有,因为我选择留下来,写一篇博客. 项目中经常性的会遇到什么点击"全选"按钮,勾中所有"单选 ...

  9. jquery-防多店铺购物车结算全选,单选,及删除,价格计算

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Codeforces633G(SummerTrainingDay06-I dfs序+线段树+bitset)

    G. Yash And Trees time limit per test:4 seconds memory limit per test:512 megabytes input:standard i ...

  2. HDU3715(二分+2-SAT)

    Go Deeper Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  3. vue.js关于路由的跳转

    1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 route ...

  4. MySQL入门详解(三)---mysql如何进行主从配置

    基本要求 两台服务器(windows,linux,mac) 双方mysql版本需一致,如不一致,只要主节点低于从节点 两台服务器防火墙关闭 双方数据库所用的用户,要具有远程访问的权限 主服务器配置 修 ...

  5. js-redux学习笔记2

    1.为了 dispatch 一个 action,我们需要一个 dispatch 函数.可以用一个 action creator 去发送一个 action. var setNameActionCreat ...

  6. 70部MAYA灯光材质渲染教程合集

    MAYA灯光材质渲染教程合集 教程格式:MP4和flv 两种格式 使用版本:教程不是一年出的教程,各个版本都有 (教程软件为英文版) 清晰度:可以看清软件上的文字 语言:部分中文字幕,其他英文(通过看 ...

  7. w3school 基础学习

    http://www.w3school.com.cn/ http://www.w3school.com.cn/sql/sql_quickref.asp

  8. 十个强大的DevOps基础设施自动化工具,不容错过

    Devops基础设施自动化的工具 有许多工具用于基础设施自动化.使用哪个工具决定于体系结构和基础设施的需求.下面我们列出了一些伟大的工具,用于不同类别配置管理.编制.持续集成.监控等. 1.Chef ...

  9. Python通过LDAP验证、查找用户(class,logging)

    定义一个类,用于初始化ldap连接,验证.查找用户等功能 # -*- coding: UTF-8 -*- import sys reload(sys) sys.setdefaultencoding(' ...

  10. ODS设计

    1.数据调研 2.确定数据范围 需要把上端应用需求与ODS数据范围进行验证,以确保应用所需的数据都已经从业务系统中抽取出来,并且得到了很好的组织,以ER模型表示数据主题关系 3.根据数据范围进行进一步 ...