다른 라디오를 검사 할 때 div의 클래스를 전환하십시오.

Question

간단한 작업처럼 보이고 몇 가지 변형을 시도해 보았습니다. 태그에 라디오가있는 테이블이 있습니다. 각 라디오는 동일한 열에있는 데이터 그룹과 일치합니다. 의 라디오를 클릭하면 클래스를 추가/제거하거나 toggleClass를 사용하여 사용자가 다른 옵션을 선택하면 각 열이 강조 표시됩니다.

.highlightMe { 
background:#D32F32; 
} 

:

JS FIDDLE

<form id="myForm"> 
<table> 
<tr> 
<th class="highlightMe option"> <input type="radio" name="radioName" value="1" checked="checked" class="option"/>one 
</th> 
<th class="noClass option"><input type="radio" name="radioName" value="2" class="option"/>two 
</th> 
    <th class="noClass option"><input type="radio" name="radioName" value="3" class="option"/>three 
    </th> 
    </tr> 
    <tr> 
    <td class="highlightMe">Highlight Me</td> 
    <td class="noClass option">Or Highlight Me</td> 
    <td class="noClass option">Or highlight three</td> 
    </tr> 
    </table> 
    </form> 

배경으로 간단한 클래스는 테이블 데이터의 모든 열을 강조 :

내가 여기 달성하기 위해 노력하고 있습니다 무엇의 샘플 바이올린을 만든 내가 시도한 실패한 스크립트 중 하나 :

$('.option').each(function() { 
var $this = $(this); 
if($this.attr('checked')) { 
    $this.addClass('highlightMe'); 
} else { 
    $this.removeClass('highlightMe'); 
} 
}); 

Answer 1

는

jQuery(function($) { 
    $('.option').change(function() { 
     var $this = $(this), $td = $this.parent(), $tr=$td.parent(); 

     $tr.next().add($tr).find('.highlightMe').removeClass('highlightMe'); 

     if(this.checked) { 
      $tr.next().find('td').eq($td.index()).add($td).addClass('highlightMe') 
     } 
    }); 
}); 

데모 시도 : Fiddle