zoukankan      html  css  js  c++  java
  • [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]时,虽然元素分别在infoDiscountIdinfoDisLessonId中,但如果碰到它们当中有相同值,此时都将删除,这是所不希望发生的。
    * 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

  • 相关阅读:
    帝国 标签模板 使用程序代码 去除html标记 并 截取字符串
    iis6 伪静态 iis配置方法 【图解】
    您来自的链接不存在 帝国CMS
    帝国cms Warning: Cannot modify header information headers already sent by...错误【解决方法】
    .fr域名注册 51元注册.fr域名
    帝国网站管理系统 恢复栏目目录 建立目录不成功!请检查目录权限 Godaddy Windows 主机
    星外虚拟主机管理平台 开通数据库 出现Microsoft OLE DB Provider for SQL Server 错误 '8004' 从字符串向 datetime 转换失败
    ASP.NET 自定义控件学习研究
    CSS层叠样式表之CSS解析机制的优先级
    ASP.NET程序员工作面试网络收藏夹
  • 原文地址:https://www.cnblogs.com/farwish/p/3964350.html
Copyright © 2011-2022 走看看