jQuery에서 라디오 버튼을 사용하여 div 표시 여부를 전환하는 방법은 무엇입니까?

Question

비슷한 질문이 많은 게시물이 많이 있지만 하나의 페이지에서 표시 여부를 전환하는 데 사용되는 여러 라디오 버튼과 관련된 게시물을 찾을 수 있습니다.

양식에 20 개의 질문 집합이 있는데 사용자가 "예"를 선택하면 설명을 입력 할 수 있도록 텍스트 영역에 해당 질문을 표시하고 싶습니다.

이전에 "예"라디오 버튼을 선택하면 페이지의 모든 텍스트 영역의 표시 여부가 토글되지만 parent().find('.toggle')을 사용하여이를 해결하려했으나 여전히 작동하지 않는 문제가있었습니다.

도움이된다면 도움이 될 것입니다.

자바 스크립트 :

$('.toggle').hide(); 

$('.show').bind('change',function(){ 

    var showOrHide = ($(this).val() == 1) ? true : false; 

    showOrHide.parent().find('.toggle').toggle(showOrHide); 

}) 

HTML :

var showOrHide = ($(this).val() == 1) ? true : false; 

당신은 다음 전화를 시도하십시오 showOrHide 변수에

<div class="question"> 
    <label>Question 1</label> 
    <span class="options"> 
     No <input type="radio" class="show" value="0" id="question_1_no" name="question_1"> 
     Yes <input type="radio" class="show" value="1" id="question_1_yes" name="question_1"> 
     <br /> 
     <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea> 
    </span> 
</div> 

<div class="question"> 
    <label>Question 2</label> 
    <span class="options"> 
     No <input type="radio" class="show" value="0" id="question_2_no" name="question_2"> 
     Yes <input type="radio" class="show" value="1" id="question_2_yes" name="question_2"> 
     <br /> 
     <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea> 
    </span> 
</div> 

Answer 1

당신이 지정한 다음 줄에

중 하나 true 또는 false 해당 부울 리터럴에 대한 jQuery 메서드 및 분명히 작동하지 않을 것입니다. 다시 this을 사용하십시오. 또한 수준을 등반 대신 siblings 사용할 수 있습니다

$(this).siblings('.toggle').toggle(showOrHide); 

가 여기 working example입니다. 별도의 노트에

, 당신은 당신의 코드를 약간 단순화 할 수 당신이 당신의 조건문 필요가 없습니다 0 및 1 때문에, false 및 true에 강요합니다

$('.show').bind('change',function() { 
    $(this).siblings('.toggle').toggle($(this).val()); 
}); 

또한, 만약 '을 jQuery (1.7)의 최신 버전을 사용하는 경우 bind 대신 on을 사용해야합니다.