1. 框架是Jquery

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

　　当我全选的时候：

对应于

当我没有全选的时候

对应于 

HTML代码如下：

  1. <div class="container">
  2.         <div>全选<input type="checkBox" class="AllSelect"/></div>
  3.         <div>
  4.             <label><input type="checkbox" value="201399720559172" class="selector"/></label>
  5.             <label><input type="checkbox" value="201399720559173" class="selector"/></label>
  6.             <label><input type="checkbox" value="201399720559174" class="selector"/></label>
  7.         </div>
  8.     </div>
  9.     <input id="boxFrom" type="hidden" value=""/>

JS代码如下：

  1. var callback = (function(){
  2.  
  3.             function CheckBox(container){
  4.                 var self = this;
  5.  
  6.                 if(this instanceof CheckBox) {
  7.  
  8.                     // 匹配传参数clickElem
  9.                     if($.isPlainObject(container)){
  10.                         this.container = container;
  11.                     }else if(/^\./.test(container)){
  12.                         this.container = $(container);
  13.                     }else if(/^#/.test(container)){
  14.                         this.container = $(container);
  15.                     }else if($('.'+container)){
  16.                         this.container = $('.'+container);
  17.                     }else {
  18.                         throw new Error('传递参数不符合!');
  19.                     }
  20.                 }else {
  21.                     new CheckBox(container);
  22.                 }
  23.  
  24.                 $(this.container).click(function(e) {
  25.                     var target = e.target;
  26.                     if(target.type === 'checkbox' && $(target).hasClass('selector')) {
  27.                         self.itemSelect(target);
  28.                     }else if (target.type === 'checkbox' && $(target).hasClass('AllSelect')) {
  29.                         self.allSelect(target);
  30.                     }else {
  31.                         new Error('没有找到相应的选项!');
  32.                     }
  33.                 });
  34.             }
  35.  
  36.             CheckBox.prototype = {
  37.  
  38.                 constructor: CheckBox,
  39.  
  40.                 _count: 0, // 计数器
  41.  
  42.                 _arr: [],
  43.  
  44.                 _itemArrs: [],
  45.  
  46.                 _selectLen: $('.selector').length,
  47.  
  48.                 itemSelect: function(target){
  49.                     var self = this,
  50.                         itemVal;
  51.                     if(target.checked){
  52.                         target.checked = true;
  53.                         self._count++;
  54.  
  55.                         // 当选中最后一个时候 全选复选框也选择上
  56.                         if(self._count >= self._selectLen) {
  57.                             $('.AllSelect').attr('checked',true);
  58.                         }
  59.                         itemVal = $(target).attr('value');
  60.  
  61.                         self._arr.push(itemVal);
  62.  
  63.                         self.request(self._arr);
  64.                     }else {
  65.                         target.checked = false;
  66.  
  67.                         if(self._count <= 0){
  68.                             self._count = 0;
  69.                         }else {
  70.                             self._count--;
  71.                         }
  72.                         if(self._count < self._selectLen) {
  73.                             $('.AllSelect').attr('checked',false);
  74.                         }
  75.                         itemVal = $(target).attr('value');
  76.                         if(self._arr.length > 0) {
  77.                             for(var i = 0, ilen = self._arr.length; i < ilen; i+=1) {
  78.                                 if(itemVal == self._arr[i]) {
  79.                                     self.removeItem(self._arr[i],self._arr);
  80.                                 }
  81.                             }
  82.                         }
  83.                         var curVal = self.unique(self._arr);
  84.                         $('#boxFrom').attr('value',curVal);
  85.                     }
  86.                 },
  87.                 // 索引 jquery1.8 indexof 会重新排序 所以没有用jquery indexof
  88.                 indexOf: function(item,arr) {
  89.                     if(Array.prototype.indexOf) {
  90.                         return arr.indexOf(item);
  91.                     }else {
  92.                         for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
  93.                             if(arr[i] == item) {
  94.                                 return i;
  95.                             }else {
  96.                                 return -1;
  97.                             }
  98.                         }
  99.                     }
  100.                 },
  101.                 // 从数组里面删除一项
  102.                 removeItem: function(item,arr){
  103.                     var self = this,
  104.                         index = self.indexOf(item,arr);
  105.                     if(index > -1) {
  106.                         arr.splice(index, 1);
  107.                     }
  108.                 },
  109.  
  110.                 // 全选
  111.                 allSelect: function(target){
  112.                     var self = this;
  113.                     if(target.checked) {
  114.                         $('.selector').each(function(index,item){
  115.                             item.checked = true;
  116.                             var itemVal = $(item).attr('value');
  117.                             self._arr.push(itemVal);
  118.                         });
  119.                         self.request(self._arr);
  120.                     }else {
  121.                         target.checked = false;
  122.                         $('#boxFrom').attr('value','');
  123.                         $('.selector').each(function(index,item){
  124.                             item.checked = false;
  125.                             self._count = 0;
  126.                             self._arr = [];
  127.                         });
  128.                     }
  129.                 },
  130.  
  131.                 //去掉数组重复项
  132.                 unique: function(arr){
  133.                     arr = arr || [];
  134.                     var obj = {},
  135.                         ret = [];
  136.                     for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
  137.                         var curItem = arr[i],
  138.                             curItemType = typeof(curItem) + curItem;
  139.                         if(obj[curItemType] !== 1) {
  140.                             ret.push(curItem);
  141.                             obj[curItemType] = 1;
  142.                         }
  143.                     }
  144.                     return ret;
  145.                 },
  146.  
  147.                 // 处理业务逻辑
  148.                 request: function(arr){
  149.                     var self = this;
  150.                     if($.isArray(arr)){
  151.                         var arr = self.unique(arr);
  152.                         $('#boxFrom').attr('value',arr.join(','));
  153.                     }else {
  154.                         $('#boxFrom').attr('value',arr);
  155.                     }
  156.                 }
  157.             };
  158.  
  159.             return CheckBox;
  160.         })();
  161.  
  162.         //调用如下
  163.         new callback('.container');

第二种JS如下：

  1. /**
  2.  * 全选 反选JS组件
  3.  * author tugenhua
  4.  * @time 2014-3-19
  5.  * @requires{jQuery}
  6.  * input复选框的结构 如：<input type="checkbox" data-id="" class="single-selector"/>
  7.  */
  8.  
  9.  function CheckBox(options) {
  10.  
  11.      this.config = {
  12.         allSelectId        : '#j-checkbox',        //全选ID
  13.         singleSelectCls    : '.single-selector',   // 单选class
  14.         noSelectId         : '#j-no-checkbox',     // 反选ID
  15.         hiddenId           : '#boxFrom',           // 隐藏域 存放id
  16.         singleCallBack     : null,                 // 单选后回调函数
  17.         cancelCallBack     : null,                 // 取消单选回调函数
  18.         allCallBack        : null,                 // 全选后回调函数
  19.         noSelectCallBack   : null                  // 反选后回调函数
  20.      };
  21.  
  22.      this.cache = {
  23.         selectLen : 0
  24.      };
  25.      this._init(options);
  26.  
  27.  }
  28.  
  29.  CheckBox.prototype = {
  30.      constructor: CheckBox,
  31.      _init: function(options){
  32.          this.config = $.extend(this.config,options || {});
  33.  
  34.          var self = this,
  35.               _config = self.config,
  36.               _cache = self.cache;
  37.          _cache.selectLen =  $(_config.singleSelectCls).length;
  38.  
  39.              /*
  40.               * 全选功能
  41.               * 没有用事件代理
  42.               */
  43.             $(_config.allSelectId).unbind().bind('click',function(e){
  44.                 var target = e.target;
  45.                 self._allSelect(target);
  46.             });
  47.  
  48.             // 单选
  49.             $(_config.singleSelectCls).each(function(){
  50.                 $(this).unbind().bind('click',function(e){
  51.                     var target = e.target;
  52.                      self._itemSelect(target);
  53.                 })
  54.             });
  55.  
  56.             // 反选
  57.             $(_config.noSelectId).unbind().bind('click',function(e){
  58.                 var target = e.target;
  59.                 self._noSelect(target);
  60.             });
  61.      },
  62.      _count: 0, // 计数器
  63.      _arr: [],
  64.      _itemArrs: [],
  65.      _itemSelect: function(target){
  66.             var self = this,
  67.                 _config = self.config,
  68.                 _cache = self.cache,
  69.                 itemVal,
  70.                 tagParent;
  71.             if(target.checked){
  72.                 target.checked = true;
  73.                 self._count++;
  74.                 // 当选中最后一个时候 全选复选框也选择上
  75.                 if(self._count >= _cache.selectLen) {
  76.                     $(_config.allSelectId).attr('checked',true);
  77.                 }
  78.  
  79.                 itemVal = $(target).attr('data-id');
  80.                 self._arr.push(itemVal);
  81.                 self._request(self._arr);
  82.  
  83.                 // 单选后 回调 参数为点击后的id
  84.                 _config.singleCallBack &&
  85.                 $.isFunction(_config.singleCallBack) &&
  86.                 _config.singleCallBack(itemVal);
  87.             }else {
  88.                 target.checked = false;
  89.  
  90.                 if(self._count <= 0){
  91.                     self._count = 0;
  92.                 }else {
  93.                     self._count--;
  94.                 }
  95.                 if(self._count < _cache.selectLen) {
  96.                     $(_config.allSelectId).attr('checked',false);
  97.                     $(_config.noSelectId).attr('checked',false);
  98.                 }
  99.                 itemVal = $(target).attr('data-id');
  100.                 self._arr = self.unique(self._arr);
  101.                 if(self._arr.length > 0) {
  102.                     for(var i = 0, ilen = self._arr.length; i < ilen; i+=1) {
  103.                         if(itemVal == self._arr[i]) {
  104.                             self._removeItem(self._arr[i],self._arr);
  105.                         }
  106.                     }
  107.                 }
  108.                 self._request(self._arr);
  109.                 // 取消单选后 回调 参数为点击后的id
  110.                 _config.cancelCallBack &&
  111.                 $.isFunction(_config.cancelCallBack) &&
  112.                 _config.cancelCallBack(itemVal);
  113.             }
  114.         },
  115.      // 索引 jquery1.8 indexof 会重新排序 所以没有用jquery indexof
  116.         _indexOf: function(item,arr) {
  117.             if(Array.prototype.indexOf) {
  118.                 return arr.indexOf(item);
  119.             }else {
  120.                 for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
  121.                     if(arr[i] == item) {
  122.                         return i;
  123.                     }else {
  124.                         return -1;
  125.                     }
  126.                 }
  127.             }
  128.         },
  129.         // 从数组里面删除一项
  130.         _removeItem: function(item,arr){
  131.             var self = this,
  132.                 index = self._indexOf(item,arr);
  133.             if(index > -1) {
  134.                 arr.splice(index, 1);
  135.             }
  136.         },
  137.         // 全选
  138.         _allSelect: function(target){
  139.             var self = this,
  140.                 _config = self.config,
  141.                 tagParent,
  142.                 itemVal;
  143.                 $(_config.singleSelectCls).each(function(index,item){
  144.                     item.checked = true;
  145.                     itemVal = $(item).attr('data-id');
  146.                     self._arr = self.unique(self._arr);
  147.                     self._arr.push(itemVal);
  148.                 });
  149.                 self._request(self._arr);
  150.  
  151.                 // 全选后 回调 参数为所有的id
  152.                 _config.allCallBack &&
  153.                 $.isFunction(_config.allCallBack) &&
  154.                 _config.allCallBack(self.unique(self._arr));
  155.         },
  156.         // 反选
  157.         _noSelect: function(target){
  158.             var self = this,
  159.                 _config = self.config;
  160.             $(_config.allSelectId).attr("checked",false);
  161.             $(_config.singleSelectCls).each(function(index,item){
  162.                 if($(item).attr('checked') == 'checked') {
  163.                     $(item).attr('checked',false);
  164.                     var itemVal = $(item).attr('data-id');
  165.                     self._arr = self.unique(self._arr);
  166.                     if(self._arr.length > 0) {
  167.                         for(var i = 0, ilen = self._arr.length; i < ilen; i+=1) {
  168.                             if(itemVal == self._arr[i]) {
  169.                                 self._removeItem(self._arr[i],self._arr);
  170.                             }
  171.                         }
  172.                     }
  173.                     self._request(self._arr);
  174.                 }else {
  175.                     $(item).attr('checked',true);
  176.                     var itemVal = $(item).attr('data-id');
  177.  
  178.                     self._arr.push(itemVal);
  179.  
  180.                     var curVal = self.unique(self._arr);
  181.                     $(_config.hiddenId).attr('value',curVal);
  182.                 }
  183.             });
  184.             self._request(self._arr);
  185.  
  186.             // 反选后 回调 参数为所有的id
  187.             _config.noSelectCallBack &&
  188.             $.isFunction(_config.noSelectCallBack) &&
  189.             _config.noSelectCallBack(self.unique(self._arr));
  190.         },
  191.         //去掉数组重复项
  192.         unique: function(arr){
  193.             arr = arr || [];
  194.             var obj = {},
  195.                 ret = [];
  196.             for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
  197.                 var curItem = arr[i],
  198.                     curItemType = typeof(curItem) + curItem;
  199.                 if(obj[curItemType] !== 1) {
  200.                     ret.push(curItem);
  201.                     obj[curItemType] = 1;
  202.                 }
  203.             }
  204.             return ret;
  205.         },
  206.         // 处理业务逻辑
  207.         _request: function(arr){
  208.             var self = this,
  209.                 _config = self.config;
  210.             if($.isArray(arr)){
  211.                 var arr = self.unique(arr);
  212.                 $(_config.hiddenId).attr('value',arr.join(','));
  213.             }else {
  214.                 $(_config.hiddenId).attr('value',arr);
  215.             }
  216.         }
  217.  };

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. java.lang.NoSuchMethodError: No static method getFont(Landroid/content/Context;ILandroid/util/TypedValue;ILandroid/widget/TextView;)

    global.gradle版本配置文件 原配置 compile_sdk_version = 26 build_tools_version = '26.0.2' target_sdk_version = ...

  2. Hadoop在启动时的坑——start-all.sh报错

    1.若你用的Linux系统是CentOS的话,这是一个坑: 它会提示你JAVA_HOME找不到,现在去修改文件: .修改hadoop配置文件,手动指定JAVA_HOME环境变量 [${hadoop_h ...

  3. PHP中按值传递和引用传递的区别

    有次跟朋友讨论对象传值的方式时提到引用传值时,在大脑中搜索五秒钟,果断确定在这两个项目当中并没有用到.今天去问了一下度娘,顺便做了个小测试: 按值传递: 引用传递: 按值传递中原来参数的值在调用其他函 ...

  4. 【Redis】Redis学习（六） Redis 基本运维

    Redis的单机搭建,主从搭建,Sentinal搭建,以及Redis集群搭建的步骤参照前面的文章.现在来说一下Redis的基本运维,毕竟如果一切正常是最好的,但是当出现问题不能使用的时候,准确定位问题 ...

  5. nginx 配置 非80 的其他 端口

    如果nginx的监听端口不是默认的80端口,改为其他非80端口后,后端服务tomcat中的request.getServerPort()方法无法获得正确的端口号,仍然返回到80端口.在response ...

  6. go语言练习：指针

    指针是一个变量,存储的是另一个变量的地址 package main import "fmt" func main() { var a string = "hello&qu ...

  7. Visual Studio Code配置Python环境

    安装环境python环境变量,这个就不写了,这类文章一抓一大把,这类就省略了······· 在Visal Studil Code中配置python环境,其实跟我的上一篇文章一样,如图: 这里有两个选择 ...

  8. Java -- Web前端面试题及答案（需更深入了解）

    Web前端方面 1.CSS引入的方式有哪些? 1)外联:<link>标签 2)内联:<style>标签 3)元素内嵌:元素的style属性 2.CSS选择符有哪些? 标签选择符 ...

  9. Oracle EBS INV 挑库发放物料搬运单

    create or replace PROCEDURE XX_TRANSACT_MO_LINE AS -- Common Declarations l_api_version NUMBER := 1. ...

  10. 【爬坑】在 IDEA 中运行 Hadoop 程序 报 winutils.exe 不存在错误解决方案

    0. 问题说明 环境为 Windows 10 在 IDEA 中运行 Hadoop 程序报   winutils.exe 不存在  错误 1. 解决方案 [1.1 解压] 解压 hadoop-2.7.3 ...