JavaScript를 사용하여 양식의 특정 섹션을 표시하거나 숨 깁니다. 한 번에 하나의 섹션 만 표시하는 방법?

Question

안녕 나는 셋업에 대해 다음 한 : 처음 양식을 볼 때

<form action="?" method="post" name="contactform"> 

<div class="question"> 
    <p><span><input type="radio" name="answer" value="Yes" onclick="showHide('one')"/></span> Yes</p> 
</div> 
<div id="one" class="answers" style="display:none"> 
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p> 
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p> 
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p> 
</div><!-- end answers --> 

<div class="question"> 
    <p><span><input type="radio" name="answer" value="No" onclick="showHide('two')"/></span> No</p> 
</div> 
<div id="two" class="answers" style="display:none"> 
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p> 
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p> 
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p> 
    <p><input type="radio" name="answerdetail" value="Reason Four" /> Reason Four</p> 
</div><!-- end answers --> 

<div class="question"> 
    <p><span><input type="radio" name="answer" value="Not sure" /></span> Not sure</p> 
</div> 

만 3 체크 표시 박스 (예, 아니오, 모르겠 음)이 있습니다. '예'를 클릭하면 '예'의 하위 체크 박스가 나타나고 '아니오'를 클릭하면 '아니오'의 하위 체크 박스가 나타납니다.

한 번에 하나의 하위 체크 박스 세트 만 표시 할 수 있는지 알고 싶습니다.

e.e. 누군가 '예'를 체크하면 '예'의 하위 체크 박스가 나타납니다. 그런 다음 마음이 바뀌고 '아니요'를 클릭하면 '예'에 대한 하위 체크 박스가 사라지고 '아니오'에 대한 하위 체크 박스가 나타납니다 (하위 체크 박스는 한 번만 표시됩니다).

나는 이것이 의미가 있기를 바랍니다.

도움이 될 것입니다.

Answer 1

jQuery에는 유용한 메소드가 몇 가지 있습니다. .hide()/.show()을 사용하면 요소의 표시 여부를 토글 할 수 있습니다. .next()을 사용하여 정답 섹션을 타겟팅 할 수 있습니다.

데모 시험 :

여기

$(document).ready(function() { 
    $('input[name="answer"]').change(function() { 
     $(".answers").hide(); 
     $('input[name="answer"]:checked') 
      .closest(".question") 
      .next(".answers") 
      .show(); 
    }); 
}); 

Answer 2

내가이 접근 할 방법은 다음과 같습니다 또한, '변화'이벤트를 처리하려면 사용자가 다른 옵션을 선택 때마다 핸들러를 발사합니다 .change()을 사용할 수 있습니다 :

$('input:radio').change(
    function(){ 
     $('.answers').slideUp(); 
     $(this).closest('div').next('.answers').slideDown(); 
    });​ 

,127 : http://jsfiddle.net/earthdesigner/UYWx8/

Answer 3

내가 생각할 수있는 가장 쉬운 방법은, 당신의 HTML을 부여.

참고 :

• closest().
• next().
• slideDown().
• slideUp().