CSS를 사용하여 라디오 버튼의 글꼴을 동적으로 변경할 수 있습니까?

Question

jquery (How do I get javascript to run more than once?)를 사용하여이 작업을 시도했지만 일부 사람들은 CSS를 사용하여 더 쉽게 할 수 있다고 말했습니다. 지금 나는 라디오 버튼이 선택 될 때마다 아래와 같이 ez 선택된 클래스를 동적으로 추가하고 제거하는 JS를가집니다. 단추를 이미지로 바꾸는 데 사용됩니다.

CSS를 사용할 수있는 방법이 없으므로 선택한 클래스를 추가하면 span 태그의 텍스트가 굵게 표시되고 선택한 클래스가 제거되면 굵은 글꼴이 제거됩니다. 내 장바구니 소프트웨어에 코딩되어 있기 때문에 HTML 구조를 변경할 수 없습니다. 감사!

EDIT : 입력에 가장 가까운 스팬의 스타일을 지정할 수있는 CSS 선택기가 있습니까? 나는 + 다른 요소 바로 뒤에 요소를 선택할 수 있지만 그 span이 다른 div에 있더라도 선택된 라디오 버튼 다음의 다음 범위 요소를 선택하는 방법이 있습니까?

<div class="row"> 
     <input name="TXT870" type="hidden" value="Option 1"> 
     <div class="col-xs-2"> 
      <div class="ez-radio (ez-selected)"> 
       <input class="clearBorder ez-hide" name="CAG3" onclick= 
       "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);" 
       type="radio" value="870_625_0_625"> 
      </div><input name="CAG3QF1" type="hidden" value="0"> 
     </div> 
     <div class="col-xs-7"> 
      <span>Option 1</span> <input class="transparentField" name= 
      "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00"> 
     </div> 
    </div> 

Answer 1

.ez-selected 사업부는 할 수 없습니다 ... 그래서 NO ... 스팬의 이전 형제 또는 부모가 아닙니다. 이 구조

<div class="row"> 
     <input name="TXT870" type="hidden" value="Option 1"> 
     <div class="col-xs-2"> 
      <div class="ez-radio ez-selected"> 
       <input class="clearBorder ez-hide" name="CAG3" onclick= 
       "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);" 
       type="radio" value="870_625_0_625"> 
      </div><input name="CAG3QF1" type="hidden" value="0"> 
     </div> 
     <div class="col-xs-7"> 
      <span>Option 1</span> <input class="transparentField" name= 
      "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00"> 
     </div> 
    </div> 

당신은 먼저 DOM을 여행해야 할 것입니다 그리고 당신은 CSS로 생각 정확히 무엇을 그 어떤 parent selector