라디오 버튼의 라벨 변경

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; 
}