[jQ]jQuery显式操作Checkbox,并用数组存储关联值的方案
-------------------------------------------------------------------------------------------------------
/**
* 显式选中清空Checkbox(jQuery代码)
* @黑眼诗人 <www.farwish.com>
*/
var obj = $(':checkbox');
obj.on('click',function(){
oThis = $(this); if(oThis.attr('selected') == 'selected'){
oThis.removeAttr('selected');
}else{
oThis.attr({'selected':true});
}
}); /**
* 注:如果是点击按钮(不直接点击Checkbox)触发事件,先取消可见勾选,再清除显式的属性勾选
*
* 如:$(':checkbox').each(function(){
* if($(this).attr('selected') == 'selected')
* {
* $(this).attr('checked', false); //取消可见的勾选
* $(this).removeAttr('selected'); //取消显式的属性勾选
* }
* });
*/
/**
* 显式将Checkbox和隐藏值存入数组(jQuery代码)
* @黑眼诗人 <www.farwish.com>
*/
var info = {"discount" : {"discount_id" : [], "discount_lesson_id" : []}}; infoDiscountId = info['discount']['discount_id'];
infoDisLessonId = info['discount']['discount_lesson_id']; $('input[name="discount_id"]').on('click', function(){
var oThis = $(this); if(oThis.attr('selected') == 'selected'){
oThis.removeAttr('selected'); $.each(infoDisLessonId, function(i, n){
if(infoDisLessonId[i] == oThis.prev('input').val()){
delete infoDisLessonId[i]; //唯一性删除
j = i; //对应DiscountId中的i
}
}); delete infoDiscountId[j]; console.log(info); }else{ oThis.attr({'selected':true}); infoDiscountId.push(oThis.val()); //数组新增元素
infoDisLessonId.push(oThis.prev('input').val()); //新增元素2 console.log(info);
}
}); /*存在问题:
* 1.删除infoDisLessonId[i]时,虽然元素分别在infoDiscountId 和 infoDisLessonId中,但如果碰到它们当中有相同值,此时都将删除,这是所不希望发生的。
* 2.使用delete infoDiscountId[i]此种形式的删除时,原数组长度不变,索引还在,只是当前infoDiscountId[i]值变为undefined。
*/
/**
* 解决例2当中的存在问题,更换数组格式储值(jQuery代码)
* @黑眼诗人 <www.farwish.com>
*/
var info = {"discount" : []}; infoDiscountId = info['discount']; $('input[name="discount_id"]').on('click', function(){
var oThis = $(this); if(oThis.attr('selected') == 'selected'){
oThis.removeAttr('selected'); $.each(infoDiscountId, function(i, n){
if(infoDiscountId[i]['discount_id'] == oThis.val() && infoDiscountId[i]['discount_lesson_id'] == oThis.prev('input').val())
{
//删除前进行唯一性判断,参考添加时的存储方式
infoDiscountId.splice(i, 1); //使用splice删除单个元素,代替delete
}
}); console.log(info); }else{ oThis.attr({'selected':true}); infoDiscountId.push({"discount_id":oThis.val()}); //push在数组末尾添加一对数组元素,discount_id var index = infoDiscountId.length - 1; //获得新增元素的索引 infoDiscountId[index]['discount_lesson_id'] = oThis.prev('input').val(); //在此索引下再增加一对数组元素,discount_lesson_id console.log(info);
}
}); /*
* 完美解决例2中存在的问题
*/
应用场景:当需要由多个表数据关联得到某一具体数值时,上例是一种解决的思路和方案。
Link: http://www.cnblogs.com/farwish/p/3964350.html
[jQ]jQuery显式操作Checkbox,并用数组存储关联值的方案的更多相关文章
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- jQ的显式迭代和隐式迭代
jQ的显示迭代 隐式迭代 let lis = document.querySelector('li') lis.forEach(function (value, index) { value.styl ...
- 强大的JQuery链式操作风格
实例代码 <style type="text/css"> #menu {width: 300px;} .has_children {background:#555;co ...
- jQery的链式操作和商城简易导航栏
今天要记录的是jq的一些简单操作.项目的需求是做一个导航栏,单机不同的商品名称链接,显示相应的内容.用js来写的话相对代码量要多一些,选择jqrey一行则可以搞定,下面呢是我的代码和效果图 这个是初始 ...
- Java编程的逻辑 (72) - 显式条件
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...
随机推荐
- hive on spark的坑
原文地址:http://www.cnblogs.com/breg/p/5552342.html 装了一个多星期的hive on spark 遇到了许多坑.还是写一篇随笔,免得以后自己忘记了.同事也给我 ...
- for循环.html
<script> for (var i = 1; i < 5 ; i++) { alert(i); } 公式需要记住,并多加练习,加深记忆,注意编写格式 for (var i = 1 ...
- Select模式和超时
fd_set rset; FD_ZERO(&rset); int nready; int maxfd; int fd_stdin = fileno(stdin); if(fd_stdin &g ...
- HBase的Shell命令和JavaAPI
HBase的shell操作和JavaAPI的使用: Shell 表操作 创建表 create 'student','info' #表名 列族 插入表 put 'student','1001','inf ...
- ngModel缺省是by reference,
1) 缺省是 by reference, not value, ngModel, ngOptions等都一样 2) 如果要 track value 用 "track by", ...
- CS229 6.1 Neurons Networks Representation
面对复杂的非线性可分的样本是,使用浅层分类器如Logistic等需要对样本进行复杂的映射,使得样本在映射后的空间是线性可分的,但在原始空间,分类边界可能是复杂的曲线.比如下图的样本只是在2维情形下的示 ...
- sql zhuan ORACLE
DbType OracleType SqlDatabase OracleDatabase SqlParam.cs SqlServerHelper.cs InsertByHashtableRetur ...
- gentoo raid1
参考 gentoo wiki,和其他网页,实现两个硬盘组成 raid1. 两个硬盘一个是 sdc,一个是 sdd,都是 4T容量. 首先内核开启 Autodetect RAID arrays duri ...
- github构建个人网站模板
http://novoland.github.io/%E5%B9%B6%E5%8F%91/2014/09/11/ThreadLocal%20%E5%88%86%E6%9E%90.html
- 26.pymysql、pymongo、redis-py安装
pymysql.pymongo.redis-py安装 1.将数据存入mysql借助pymysql2.和MongoDB进行交互,借助pymongo pip3 install pymysql(pip 安装 ...