-------------------------------------------------------------------------------------------------------

/**
* 显式选中清空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,并用数组存储关联值的方案的更多相关文章

  1. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  2. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  3. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  4. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  5. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

  6. jQ的显式迭代和隐式迭代

    jQ的显示迭代 隐式迭代 let lis = document.querySelector('li') lis.forEach(function (value, index) { value.styl ...

  7. 强大的JQuery链式操作风格

    实例代码 <style type="text/css"> #menu {width: 300px;} .has_children {background:#555;co ...

  8. jQery的链式操作和商城简易导航栏

    今天要记录的是jq的一些简单操作.项目的需求是做一个导航栏,单机不同的商品名称链接,显示相应的内容.用js来写的话相对代码量要多一些,选择jqrey一行则可以搞定,下面呢是我的代码和效果图 这个是初始 ...

  9. Java编程的逻辑 (72) - 显式条件

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

随机推荐

  1. 【 MAKEFILE 编程基础之三】详解 MAKEFILE 变量的定义规则使用!

    本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/gcc-makefile/770.html   ...

  2. mysql空间类型使用笔记

    创建表,填充测试数据 create table geom1(id int not null auto_increment primary key,geo geometry); )); )); sele ...

  3. 02-第一个Java程序

    学习java的第一个程序 记录自己的学习 记录自己的坚持 记录自己的梦想 public class Hello{ public static void main(String[] args) { Sy ...

  4. jmx - first demo

    1. pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  5. day20re模块 正则表达式

    re模块,正则1 re是什么 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法. 就是用来描述一类事物的规则.就是一些带有特殊含义的符号或者符号的组合.    作 ...

  6. java中六个时间类的使用和区别

    java.util.Date java.sql.Date   java.sql.Time   java.sql.Timestamp java.text.SimpleDateFormat java.ut ...

  7. ES6入门箭头函数

    箭头函数: 箭头函数可以与变量结构相结合(箭头函数返回对象的时候必须要在对象外边加()) 注意: 1️⃣函数体内的this是定义时所在的对象,而不是使用时的对象 2️⃣不可以当成构造函数,不可用new ...

  8. day7--面向对象进阶(内含反射和item系列)

    一面向对象的结构和成员 1.1面向对象的结构 class A: company_name = '老男孩教育' # 静态变量(静态字段) __iphone = '1353333xxxx' # 私有静态变 ...

  9. uva-10282-枚举

    题意:语言翻译, 直接map即可 #include "pch.h" #include <string> #include<iostream> #includ ...

  10. Jenkins 之邮件配置

    Jenkins 之邮件配置其实还是有些麻烦的,坑比较多,一不小心就...我是走了很多弯路的. 这里记录下来,希望大家以后不要重蹈覆辙: 我测试过,这里的 Extended E-mail Notific ...