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

/**
* 显式选中清空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. utf8_unicode_ci、utf8_general_ci区别

    摘录一下Mysql 5.1中文手册中关于utf8_unicode_ci与utf8_general_ci的说明:   当前,utf8_unicode_ci校对规则仅部分支持Unicode校对规则算法.一 ...

  2. React 懒加载组件

    //组件第一次初始化的时候加载. import React, {PropTypes} from 'react'; //import AppComposer from './views/App/AppC ...

  3. 用python进行桌面程序开发

    Python是一种面向对象.直译式计算机程序设计语言,也是一种功能强大而完善的通用型语言,已经具有十多年的发展历史,成熟且稳定.这种语言具有非常简捷而清晰的语法特点,适合完成各种高层任务,几乎可以在所 ...

  4. python 实现排序算法(三)-选择排序和冒泡排序

    #/usr/bin/env python #coding:utf-8 #@auther="livermorium" ''' 选择排序 从数据中选择最小值,排在位置首位 再从剩余未排 ...

  5. scrapy框架之持久化操作

    1.基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文件中进行持久化操作. 执行输出指定格式进行存储: ...

  6. python访问hive

    #!/usr/bin/env python # -*- coding: utf-8 -*- # hive util with hive server2 """ @auth ...

  7. Entity Framework 入门:准备工作

    Entity Framework 6官方文档 准备工作: 数据库:MySQL + (MySQL for Visual Studio  下载地址  + Mysql connector/net 下载地址 ...

  8. 怎么转化为LPCWSTR

    wstring a = L"hello ,中国"; LPCWSTR b; b =(LPCWSTR) a.c_str(); RemoveDirectory(b); C++中L和_T( ...

  9. java 类拷贝

    直接上代码:public class Demo { public static void main(String[] args) throws CloneNotSupportedException { ...

  10. 使用swagger 生成 Flask RESTful API

    使用swagger 生成 Flask RESTful API http://www.voidcn.com/article/p-rcvzjvpf-e.html swagger官网 https://swa ...