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

  • 相关阅读:
    mac os x 查看网络端口情况
    mac 启动php-fpm报错 failed to open configuration file '/private/etc/php-fpm.conf': No such file or direc
    视频播放—— H5同层播放器接入规范
    [转]webpack中require和import的区别
    职场方法论系列—怎样做项目
    一幅图帮你搞懂订单的拆分与合并
    如何用数据去驱动决策?
    分库分表的 9种分布式主键ID 生成方案,挺全乎的
    快手基于 Apache Flink 的优化实践
    SQL数据库中临时表、临时变量和WITH AS关键词创建“临时表”的区别
  • 原文地址:https://www.cnblogs.com/farwish/p/3964350.html
Copyright © 2011-2022 走看看