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

/**
* 显式选中清空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. Servlet基础学习

    Servlet学习 Servlet是Server与Applet的缩写,是服务端小程序的意思.使用Java语言编写的服务器端程序,可以像生成动态的WEB页,Servlet主要运行在服务器端,并由服务器调 ...

  2. CentOS 关闭图形用户界面

    1 centos 7以下版本 vim /etc/inittab :initdefault: #改为 :initdefault: 2. centos 7.x版本 rm -f /etc/systemd/s ...

  3. (转)Intellij IDEA 快捷键整理

    [常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关 ...

  4. 值得收藏的45个Python优质资源

    REST API:使用 Python,Flask,Flask-RESTful 和 Flask-SQLAlchemy 构建专业的 REST API https://www.udemy.com/rest- ...

  5. Noi.ac #309. Mas的童年(贪心)

    /* 用所谓的加法拆分操作得到 x + y = (x ^ y) + 2 * (x & y) 那么我们这两段异或相当于前缀和 + 2 * 分段使左右两块&最大 记当前前缀异或和为S, 那 ...

  6. vue-cli 项目搭建

    vue-cli 项目搭建 1.首先需要安装nodejs(安装省略). 2.用node安装vue-cli. npm install -g vue-cli   3.新建目录用来存放工程. 新建一个vue项 ...

  7. centos7 jdk

    查看已经自带的jdk: rpm -qa | grep jdk 卸载 sudo yum remove XXX   1.下载 jdk-8u101-linux-x64.rpm http://www.orac ...

  8. 关于chrome控制台警告:Synchronous XMLHttpRequest on the main thread

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th ...

  9. 2012年第三届蓝桥杯Java本科组省赛试题解析

    题目地址:https://wenku.baidu.com/view/326f7b4be518964bcf847c96.html?rec_flag=default    => 百度文档 题目及解析 ...

  10. Java多线程例子

    package rom; import java.awt.image.AreaAveragingScaleFilter; public class Xamle_2 { private static T ...