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> 

は私がやらなければならないことは、私はラジオボタンAを押すとき、あり、それはラジオボタンBを隠し、新しいdiv要素を示し は、ここに私のコードです。

Answer 1

あなたは（inputでname属性が欠落している）あなたのhtmlでのいくつかのミスがあり、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>