效果:

js代码:

function changeAtt(t,src,key) {
document.getElementById('spec_value_'+src).checked='checked';
div = document.getElementById("EXP_"+key);
elems = div.getElementsByTagName("dd")[].getElementsByTagName("a"); for(i=;i<elems.length;i++){
elems[i].className='';
}
t.className = "on"; changePrice(); /*每次调整价格 都需要用到的*/
}

扩展参数:经过服务器解析

<div class="gdExp-cs" id="EXP_1">

                            <dd>
<a href="javascript:" name="spec_1" class="" onclick="changeAtt(this,1,1)">无内存卡 <span></span></a>
<input type="radio" name="spec_1" value="" id="spec_value_1" checked="" onclick="changePrice()" style="display: none">
<a href="javascript:" name="spec_1" onclick="changeAtt(this,3,1)" class="on">16G <span></span></a>
<input type="radio" name="spec_1" value="" id="spec_value_3" onclick="changePrice()" style="display: none">
<a href="javascript:" name="spec_1" onclick="changeAtt(this,2,1)" class="">32G <span></span></a>
<input type="radio" name="spec_1" value="" id="spec_value_2" onclick="changePrice()" style="display: none">
<a href="javascript:" name="spec_1" onclick="changeAtt(this,4,1)" class="">8G <span></span></a>
<input type="radio" name="spec_1" value="" id="spec_value_4" onclick="changePrice()" style="display: none">
</dd>
<input type="hidden" name="spec_list" value=""> </div>

扩展参数:原代码

<div class="gdExp-cs" id="EXP_{$spec_key}">
<!-- {* 判断属性是复选还是单选 *} -->
<!-- {if $spec.attr_type eq } -->
<!-- {if $cfg.goodsattr_style eq } -->
<dd >
<!-- {foreach from=$spec.values item=value key=key} -->
<a href="javascript:" name="spec_{$spec_key}" {if $key eq }class="on"{/if} onclick="changeAtt(this,{$value.id},{$spec_key})">{$value.label} <span></span></a>
<input type="radio" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" {if $key eq }checked{/if} onclick="changePrice()" style="display: none"/>
<!-- {/foreach} -->
</dd>
<!-- {/foreach} -->
<!-- {/if} -->
</div>

Ecshop 单选按钮组功能 颜色多选的更多相关文章

  1. ECshop后台新功能权限添加

    ecshop后台新功能权限的添加 1.在后台“推荐管理”里添加“推荐人分成”.“会员分成”两个操作功能以及权限 index.php?act=menu incluedes/inc_priv.php:权限 ...

  2. MFC 单选按钮组向导添加和动态创建

    单选按钮组的动态生成 单选按钮也属于CButton类,但由于单选按钮总是成组使用的,所以它在制作和使用上与普通按钮有一定区别. 假设有三个单选按钮组成一组,初始时,第一个单选按钮处于选中状态. 我们先 ...

  3. kafka 消费组功能验证以及消费者数据重复数据丢失问题说明 3

    原创声明:作者:Arnold.zhao 博客园地址:https://www.cnblogs.com/zh94 背景 上一篇文章记录了kafka的副本机制和容错功能的说明,本篇则主要在上一篇文章的基础上 ...

  4. ECSHOP用户协议字体颜色更改

    ECSHOP用户协议字体颜色更改 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-11-12   ECSHOP用户协议模板文件article_pro.dwt 这 ...

  5. 生鲜配送管理系统_升鲜宝V2.0 价格组功能 操作说明_15382353715

    价格组功能是B端供应链系统,必不可少的一个功能,其主要实现不同的客户不同的价格,B端系统有一个最大的不同就是,有些商品后台下单人员能看到的.有些商品在销售的那一瞬间,还不知道价格.所以这些商品只有后台 ...

  6. Axure 矩形交互样式与单选按钮组设置

    矩形交互样式: 场景:当点击昵称的时候,密码栏会显示红框,当点击密码的时候,昵称会显示红框 补充:昵称栏和密码栏的组成其实是一个矩形框和一个文本框,这样才可以设置出场景所示的样式 这里的设置只是简单的 ...

  7. Trove系列(六)——Trove的安全组功能和Trove的卷数据快照功能介绍

    Trove的安全组功能功能描述用户目前没有办法在Trove guest 实例上配置安全组 和 安全组规则. 我们建议按照以下指导原则创建一个简单的安全组操作规则.本功能作为Trove 的附加功能实现( ...

  8. .NET开源工作流RoadFlow-表单设计-单选按钮组

    单选按钮组即:<input type='checkbox'/>控件: 绑定字段:与数据表的某个字段绑定. 数据源: 1.数据字典:在下面字段项中选择对应在数据字典项. 2.自定义:自己输入 ...

  9. 第11.17节 Python 正则表达式扩展功能:命名组功能及组的反向引用

    一. 引言 在<第11.16节 Python正则元字符"()"(小括号)与组(group)匹配模式>介绍了组匹配模式,在一个正则表达式内可以定义多个组,每个组都有一个顺 ...

随机推荐

  1. elasticsearch和hadoop集成,gateway.type hdfs设置

    配置elasticsearch的存储路径为hdfs需要两步,安装插件 elasticsearch-hadoop,在联网的情况下在命令窗口运行:plugin -install elasticsearch ...

  2. SpringTest框架JUnit单元测试用例获取ApplicationContext实例的方法

    步骤 1.继承AbstractJUnit4SpringContextTests 2.引入ApplicationContext 示例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  3. js-读取上传文件后缀

    /** * 读取文件后缀名称,并转化成小写 * @param file_name * @returns */ function houzuiToLowerCase(file_name) { if (f ...

  4. maven-腾讯SDK(QQ)接口java引入pom配置

    maven的pom.xml配置 <dependency> <groupId>net.gplatform</groupId> <artifactId>Sd ...

  5. ps还能用脚本切片?

    最近在慕课网上看有关于ps切图的视频,发现ps 切片的水还挺深的.这相当于我的一篇学习笔记吧.对于ps的基本切图我觉得对于前端人员来说就是a piece of cake.但是对于ps的精准切图,我不知 ...

  6. Xcode找不到模拟器出现"My Mac"

    问题如图: 步骤一. 找到target->built settings->Architectures->Base SDK, 选择你需要的版本;如果还是不行,看步骤二. 步骤二. 1) ...

  7. js日历表

    $scope.getCurrentWeek = function (day) { var days = ["星期日", "星期一", "星期二&quo ...

  8. 又爱又恨系列之枚举enum

    其实枚举挺简单的,只不过以前没好好学,所以不知道这个东西,恩,现在梳理一下 整体而言,首先枚举是一个数据类型,这个数据类型和结构体有点像 可以分为三个层次 1.枚举数据类型定义 第一种:enum 枚举 ...

  9. 【BZOJ-3725】Matryca 乱搞

    3725: PA2014 Final Matryca Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 160  Solved: 96[Submit][St ...

  10. 【学习笔记&训练记录】数位DP

    数位DP,即对数位进行拆分,利用数位来转移的一种DP,一般采用记忆化搜索,或者是先预处理再进行转移 一个比较大略的思想就是可以对于给定的大数,进行按数位进行固定来转移记录答案 区间类型的,可以考虑前缀 ...