[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: ...
随机推荐
- 解决sql中上下左右backspace不能用的方法
一. 解决输入 BACKSPACE 键变成 ^h 的问题 #su - oracle $stty erase ^h. 要永久生效,可以加入到用户环境配置文件 .bash_profile 中 , 加入如下 ...
- delphi正则表达式学习笔记(二)
正则表达式大全 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符.例如,"n"匹配字符"n"."\n ...
- MySQL--局域网、外网访问MySQL
一.局域网.外网访问 1. 打开CMD,导航到当前MySQL的bin路径,如下图: 2. 访问MySQL:输入MySQL -u root -p,点击Enter键,即可看到密码输入框: 输入密码,点需E ...
- string类和stringBuilder类
字符串是C#中的一种重要数据类型,在项目开发中,离不开字符串操作.C#提供了string类实现字符串操作.于Convert类相似,string类中方法有静态方法和非静态方法.注意,在C#中String ...
- JVM总结-java对象的内存布局
在 Java 程序中,我们拥有多种新建对象的方式.除了最为常见的 new 语句之外,我们还可以通过反射机制.Object.clone 方法.反序列化以及 Unsafe.allocateInstance ...
- 三种常见的Web安全问题
XSS漏洞 1.XSS简介 跨站脚本(cross site script)简称为XSS,是一种经常出现在web应用中的计算机安全漏洞,也是web中最主流的攻击方式. XSS是指恶意攻击者利用网站没有对 ...
- BZOJ2321 [BeiJing2011集训] 星器
2321: [BeiJing2011集训]星器 Time Limit: 1 Sec Memory Limit: 128 MB Description Magic Land上的时间又过了若干世纪…… ...
- mysql之完整性约束
主要内容 not null 与 default unique primary auto_increment foreign key 约束条件作用:用于保证数据的完整性和一致性 主要分为 PRIMARY ...
- C# sqlserver winform
//public static readonly string LocalSqlServer = System.Configuration.ConfigurationManager.AppSettin ...
- 重识linux-SSH中的SFTP
重识linux-SSH中的SFTP 1 SFTP也是使用SSH的通道(port 22) 2 SFTP是linux系统自带的功能 3 连接上主流的ftp软件都支持sftp协议 比如flashfxp,fi ...