jQuery : 라디오 버튼을 선택하여 테이블 행 숨기기 또는 표시

Question

여기에있는 예제를 채택 할 수 없어 새로운 질문으로 게시하겠습니다.

<tr id="catering-types"> 
    <td colspan="2">Catering Option</td> 
    <td> 
     <div class="catering-radio-option"> 
     <label><input type="radio" name="catering_type" id="pickup-only" value="pickup-only" checked="checked"> 
     Pickup Only</label> 
     </div> 
     <div class="catering-radio-option"> 
     <label><input type="radio" name="catering_type" id="delivered" value="delivered">Delivered</label> 
     </div> 
     <div class="catering-radio-option"> 
     <label><input type="radio" name="catering_type" id="fully-serviced" value="fully-serviced">Fully Serviced</label> 
     </div> 
    </td> 
</tr> 

와 라디오 버튼 체크 어떤 사용자에 따라 숨기거나 표시되어야 그 아래 행 :

나는 라디오 버튼 하나, 몇 테이블 행을했습니다. 이 예에서는 사용자가 "Delivered"라디오 버튼을 선택하면 아래의 표 행만 표시되어야합니다. 그렇지 않으면 숨겨져 야합니다.

감사

조지

Answer 1

는 라디오 버튼에 클릭 핸들러를 추가합니다. 선택하면 $ (this) .closest ('tr'). next(). hide();

가장 가까운은 필요한 마법 기능입니다. 올바른 셀렉터를 위쪽으로 검색합니다.

그냥 onclick = "$ (this) .closest ('tr'). next(). hide();를 추가하십시오. 라디오 버튼에 속성으로.

이렇게하면 케이터링 유형 행 뒤에 행이 숨겨집니다. 물론 클릭 핸들러의 선택기는 다른 유형에 대해 변경해야합니다.