單選按鈕隱藏取消隱藏div

Question

我想創建一個小問題排查器，詢問用戶是否已關閉問題，如果是的話？ >>它根據答案顯示了另一個問題。

反正

我使用單選按鈕來顯示下一個問題。 這裏是我的代碼：

<script type="text/javascript"> 
        $(document).ready(function() { 
         if($('#option_1').is(':checked')) 
         { 
          $('#child_of_option_1').show('fast'); 
         } 
         else if(!$('#option_1').is(':checked')) 
         { 
          $('#child_of_option_1').hide('fast'); 
          clearradios(child_of_option_1); 
         } 
         $('#option_1').parent().bind('click', function() { 
          if($('#option_1').is(':checked')) 
          { 
           $('#child_of_option_1').show('fast'); 
          } 
          else if(!$('#option_1').is(':checked')) 
          { 
           clearradios(child_of_option_1); 
           hidechildren(child_of_option_1); 
           $('#child_of_option_1').hide('fast'); 
          } 
         });}); 

       </script> 

HTML：

    <p><input id="option_1" value="" type="radio"> 
        <label id="option_1_id" for="option_1">Plan A</label></p> 

        <p><input id="option_2" value="" type="radio"> 
        <label id="option_2_id" for="option_2">Plan B</label></p> 

        </div> 

        <div style="display: none;" class="s_node" id="child_of_option_2"> 
           <div class="node_notes"> 
      <p>Continue with plan A </p> 

      <p></p> 
      </div> 
      <div style="display: none;" class="s_node" id="child_of_option_1"> 
           <div class="node_notes"> 
      <p>Continue with plan B </p> 

      <p></p> 
      </div> 

所有我需要做的是，當我按下單選按鈕，它隱藏單選按鈕B和顯示一個新的div。

Answer 1

你必須在你的HTML犯了一些錯誤（在input失蹤name屬性）和非閉divs，

爲此，您可以使用hide()和show()

$("#opt1").click(function() { 
 
    $("#child_of_option_2").hide(); 
 
    $("#child_of_option_1").show(); 
 
}); 
 
$("#opt2").click(function() { 
 
    $("#child_of_option_1").hide(); 
 
    $("#child_of_option_2").show(); 
 
});

.s_node { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="options"> 
 
    <p id="opt1"> 
 
    <input id="option_1" name="plan" value="" type="radio"> 
 
    <label id="option_1_id" for="option_1">Plan A</label> 
 
    </p> 
 
    <p id="opt2"> 
 
    <input id="option_2" value="" name="plan" type="radio"> 
 
    <label id="option_2_id" for="option_2">Plan B</label> 
 
    </p> 
 
</div> 
 

 
<div class="s_node" id="child_of_option_2"> 
 
    <div class="node_notes"> 
 
    <p>Continue with plan A</p> 
 
    <p></p> 
 
    </div> 
 
</div> 
 
<div class="s_node" id="child_of_option_1"> 
 
    <div class="node_notes"> 
 
    <p>Continue with plan B</p> 
 
    <p></p> 
 
    </div> 
 
</div>

Answer 2

像這樣的東西應該讓你開始：

$(document).ready(function() { 
 
    $('input[type=radio]').change(function() { 
 
    var q = this.id.split('-')[1]; 
 
    $('.s_node').fadeOut(); 
 
    $('#childopt-' + q).fadeIn(); 
 
    }); 
 
}); 
 

 
/* 
 
If the buttons are out of sync with the s_node divs, just change the ID (numbers) of the s_node divs. E.G. childopt-2 -> childopt-1 
 

 
*/

.response-container{position:relative;} 
 
    .s_node {display:none;position:absolute;top:0;left:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <p> 
 
    <input id="opt-1" name="ask" type="radio"> 
 
    <label id="opt-1_id" for="opt-1">Plan A</label> 
 
    </p> 
 
    <p> 
 
    <input id="opt-2" name="ask" type="radio"> 
 
    <label id="opt-2_id" for="opt-2">Plan B</label> 
 
    </p> 
 
</div> 
 

 
<div class="response-container"> 
 
    <div class="s_node" id="childopt-2"> 
 
    <div class="node_notes"> 
 
     <p>Continue with plan A</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
    <div class="s_node" id="childopt-1"> 
 
    <div class="node_notes"> 
 
     <p>This is where you see B</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
</div>