更改單選按鈕上的標籤

Question

我有以下代碼（它是由Magento動態創建的），我需要突出顯示已選中的單選按鈕標籤。

我該怎麼辦？我嘗試使用Mootools運行的單選按鈕本身的圖像替換腳本，但這與magento內核中的prototype.js衝突。

我需要的是能夠更改所選選項標籤上的突出顯示，所以添加一個邊框等......到選定的標籤。

難道有人指出我正確的方向嗎？

<div class="product-options-title"> 
    <dt> 
    <label class="required"> <em>*</em> Edge Details</label> 
    </dt> 
</div> 
<div class="product-options-chooser"> 
    <dd class="options-last"> 
    <div class="input-box"> 
     <ul id="options-3318-list" class="options-list"> 
     <li> 
      <input type="radio" class="radio validate-one-required-by-name product-custom-option" onClick="opConfig.reloadPrice()" name="options[3318]" id="options_3318_2" value="548258" price="0" /> 
      <span class="label"> 
      <label for="options_3318_2"> 
      <img src="http://www.justkitchens.co/media/doors/zurfiz/zurfiz_ultragloss_black_matching.jpg" /> 
      <div class="edge-option">Matching</div> 
      </label> 
      </span><script type="text/javascript">$('options_3318_2').advaiceContainer = 'options-3318-container';$('options_3318_2').callbackFunction = 'validateOptionsCallback';</script></li> 
     <li> 
      <input type="radio" class="radio validate-one-required-by-name product-custom-option" onClick="opConfig.reloadPrice()" name="options[3318]" id="options_3318_3" value="548259" price="0" /> 
      <span class="label"> 
      <label for="options_3318_3"> 
      <img src="http://www.justkitchens.co/media/doors/zurfiz/zurfiz_ultragloss_black_brushed_steel.jpg" /> 
      <div class="edge-option">Stainless Steel Effect</div> 
      </label> 
      </span><script type="text/javascript">$('options_3318_3').advaiceContainer = 'options-3318-container';$('options_3318_3').callbackFunction = 'validateOptionsCallback';</script></li> 
     <li> 
      <input type="radio" class="radio validate-one-required-by-name product-custom-option" onClick="opConfig.reloadPrice()" name="options[3318]" id="options_3318_4" value="548260" price="0" /> 
      <span class="label"> 
      <label for="options_3318_4"> 
      <img src="http://www.justkitchens.co/media/doors/zurfiz/zurfiz_ultragloss_black_glass.jpg" /> 
      <div class="edge-option">Glass Effect</div> 
      </label> 
      </span><script type="text/javascript">$('options_3318_4').advaiceContainer = 'options-3318-container';$('options_3318_4').callbackFunction = 'validateOptionsCallback';</script></li> 
     </ul> 
     <span id="options-3318-container"></span> </div> 
    </dd> 
</div> 

Answer 1

（由於生成的內容我用活）你可以這樣做：

$('input:radio').live('click', function(){ 
    if($(this).is(':checked')){ 
     $(this).next('span').addClass('border'); 
    }else{ 
     $(this).next('span').removeClass('border') 
    } 
}); 

，然後定義CSS類：

label.border{ 

    border: 1px solid red; 
}