Ecshop 单选按钮组功能 颜色多选

效果：

 

js代码：

function changeAtt(t,src,key) {
    document.getElementById('spec_value_'+src).checked='checked';
    div = document.getElementById("EXP_"+key);
    elems = div.getElementsByTagName("dd")[0].getElementsByTagName("a");

    for(i=0;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="1" 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="3" 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="2" 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="4" id="spec_value_4" onclick="changePrice()" style="display: none">
                                                        </dd>
                            <input type="hidden" name="spec_list" value="3">
                         
                            
                        
                    
               </div>

扩展参数：原代码

<div class="gdExp-cs" id="EXP_{$spec_key}">
      <!-- {* 判断属性是复选还是单选 *} --> 
      <!-- {if $spec.attr_type eq 1} --> 
      <!-- {if $cfg.goodsattr_style eq 1} --> 
      <dd >
      <!-- {foreach from=$spec.values item=value key=key} -->
      <a href="javascript:"  name="spec_{$spec_key}" {if $key eq 0}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 0}checked{/if}  onclick="changePrice()" style="display: none"/>
      <!-- {/foreach} -->
      </dd>
      <!-- {/foreach} -->
      <!-- {/if} --> 
 </div>