用单选按钮隐藏 - 取消隐藏div

Question

我想创建一个小问题排查工具，询问用户是否有问题，如果是的话？ ＆GT;＆GT;它显示了另一个问题，取决于答案。

反正

我正在使用单选按钮来显示下一个问题。 这是我的代码：

<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

这样的事情应该让你开始：

＆＃13;

＆＃13;

$(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

*/

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的html中有一些错误（name}中缺少input属性）和非关闭divs，

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

＆＃13;

＆＃13;

$("#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();
});

＆＃13;

.s_node {
  display: none
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;