夏日博客

A-A+

jQuery通过数组存储关联值显式操作Checkbox

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

本文我们来分享一下jQuery显式操作Checkbox，并用数组存储关联值的方案，对需要关联操作Checkbox的朋友可以参考一下。

应用场景:当需要由多个表数据关联得到某一具体数值时，下例是一种解决的思路和方案。

  1. /** 
  2.  * 显式选中清空Checkbox(jQuery代码) 
  3.  *  
  4.  */  
  5. var obj = $(':checkbox');  
  6.   
  7. obj.on('click',function(){  
  8.     oThis = $(this);  
  9.                
  10.     if(oThis.attr('selected') == 'selected'){  
  11.        　oThis.removeAttr('selected');  
  12.     }else{  
  13.         oThis.attr({'selected':true});  
  14.     }  
  15. });  
  16.   
  17. /** 
  18.  * 注：如果是点击按钮(不直接点击Checkbox)触发事件，先取消可见勾选，再清除显式的属性勾选 
  19.  *  
  20.  * 如：$(':checkbox').each(function(){ 
  21.  *　　　　　if($(this).attr('selected') == 'selected') 
  22.  *　　　　　{ 
  23.  *         　　$(this).attr('checked', false);        //取消可见的勾选 
  24.  *         　　$(this).removeAttr('selected');        //取消显式的属性勾选 
  25.  *　　　　　} 
  26.  *　　　}); 
  27.  */  
  28.   
  29.   
  30.  /** 
  31.  * 显式将Checkbox和隐藏值存入数组(jQuery代码) 
  32.  *  
  33.  */  
  34. var info = {"discount" : {"discount_id" : [], "discount_lesson_id" : []}};  
  35.           
  36. infoDiscountId = info['discount']['discount_id'];  
  37. infoDisLessonId = info['discount']['discount_lesson_id'];  
  38.   
  39. $('input[name="discount_id"]').on('click', function(){  
  40.     var oThis = $(this);  
  41.       
  42.     if(oThis.attr('selected') == 'selected'){  
  43.         oThis.removeAttr('selected');  
  44.           
  45.         $.each(infoDisLessonId, function(i, n){  
  46.             if(infoDisLessonId[i] == oThis.prev('input').val()){  
  47.                 delete infoDisLessonId[i]; //唯一性删除  
  48.                 j = i;    //对应DiscountId中的i  
  49.             }  
  50.         });  
  51.           
  52.         delete infoDiscountId[j];  
  53.           
  54.         console.log(info);  
  55.           
  56.     }else{  
  57.           
  58.         oThis.attr({'selected':true});  
  59.           
  60.         infoDiscountId.push(oThis.val());　　//数组新增元素  
  61.         infoDisLessonId.push(oThis.prev('input').val()); //新增元素2  
  62.          
  63.         console.log(info);  
  64.     }  
  65. });  
  66.   
  67. /*存在问题： 
  68.  * 1.删除infoDisLessonId[i]时，虽然元素分别在infoDiscountId 和 infoDisLessonId中，但如果碰到它们当中有相同值，此时都将删除，这是所不希望发生的。 
  69.  * 2.使用delete infoDiscountId[i]此种形式的删除时，原数组长度不变，索引还在，只是当前infoDiscountId[i]值变为undefined。 
  70.  */  
  71.   
  72.  /** 
  73.  * 解决例2当中的存在问题，更换数组格式储值(jQuery代码) 
  74.  *  
  75.  */  
  76. var info = {"discount" : []};  
  77.   
  78. infoDiscountId = info['discount'];  
  79.   
  80. $('input[name="discount_id"]').on('click', function(){  
  81.     var oThis = $(this);  
  82.       
  83.     if(oThis.attr('selected') == 'selected'){  
  84.         oThis.removeAttr('selected');  
  85.           
  86.         $.each(infoDiscountId, function(i, n){　　  
  87.             if(infoDiscountId[i]['discount_id'] == oThis.val() && infoDiscountId[i]['discount_lesson_id'] == oThis.prev('input').val())  
  88.             {  
  89.                 //删除前进行唯一性判断，参考添加时的存储方式  
  90.                 infoDiscountId.splice(i, 1); //使用splice删除单个元素，代替delete  
  91.             }  
  92.         });  
  93.           
  94.         console.log(info);  
  95.           
  96.     }else{  
  97.           
  98.         oThis.attr({'selected':true});  
  99.           
  100.         infoDiscountId.push({"discount_id":oThis.val()});　　//push在数组末尾添加一对数组元素，discount_id  
  101.   
  102.         var index = infoDiscountId.length - 1;　　　　　　　　//获得新增元素的索引  
  103.           
  104.         infoDiscountId[index]['discount_lesson_id'] = oThis.prev('input').val(); //在此索引下再增加一对数组元素，discount_lesson_id  
  105.           
  106.         console.log(info);  
  107.     }  
  108. });  
  109.   
  110. /* 
  111.  * 完美解决例2中存在的问题 
  112.  */  
标签：

给我留言