Question

开始返回单选按钮是和否和问题1，是问题1返回Questio1.1并隐藏按钮，依此类推。

＆＃39;是＆＃39;按钮的作用就像一个魅力，但我无法弄清楚如何制作“不”。按钮也可以使用

感谢。

    <div><input type='radio' name='opt' value='1' />I agree to start</div>

    <!-- Form 1-->

    <div class='content' id='content1'>
    <p>This is Question 1
    <br>'yes' will return Question 1.1y
    <br>'no' will return Question 1.1n</p>
    </div>
    <div class='info' id='info1'>
    <div><input type='radio' name='opt' value='2' />yes</div>
    <div><input type='radio' name='opt' value='6' />no</div>
    </div>

    <!-- Form 1.1y-->

    <div class='content' id='content2'>
    <p>This is Question 1.1y
    <br>'yes' will return Question 1.1.1y
    <br>'no' will return Question 1.1.1n</p>
    </div>
    <div class='info' id='info2'>
    <div><input type='radio' name='opt' value='3' />yes</div>
    <div><input type='radio' name='opt' value='7' />no</div>
    </div>

    <!-- Form 1.1.1y-->

    <div class='content' id='content3'>
    <p>This is Question 1.1.1y
    <br>'yes' will return answer_y
    <br>your 'no' will answer_n</p>
    </div>
    <div class='info' id='info3'>
    <div><input type='radio' name='opt' value='4' />yes</div>
    <div><input type='radio' name='opt' value='11' />no</div>
    </div>

    <!-- answer_y-->

    <div class='content' id='content4'>
    <div><p>answer_y</p></div>
    </div>

    <!-- answer_n-->

    <div class='content' id='content11'>
    <div><p>answer_n</p></div>
    </div>

    <!-- Form 1.1n-->

    <div class='content' id='content6'>
    <p>This is Question 1.1n
    <br>'yes' will return Question 1.1.1y
    <br>'no' will return Question 1.1.1n</p>
    </div>
    <div class='info' id='info6'>
    <div><input type='radio' name='opt' value='9' />yes</div>
    <div><input type='radio' name='opt' value='10' />no</div>
    </div>


     <!-- Form 1.1.1n-->

    <div class='content' id='content10'>
    <p>This is Question 1.1.1n
    <br>'yes' will return answer_y
    <br>'no' will return answer_n</p>
    </div>
    <div class='info' id='info10'>
    <div><input type='radio' name='opt' value='4' />yes</div>
    <div><input type='radio' name='opt' value='11' />no</div>
    </div>







.info { display: none; }
.content { display: none; }

 var update = function() { 
 $(".info").hide();
 $("#info" + $(this).val()).show();
 };
 $("input[type='radio']").change(update);


 var update1 = function() { 
 $("#content" + $(this).val()).show();
 };
 $("input[type='radio']").change(update1);

http://jsfiddle.net/j2x96buL/15/

Answer 1

使用复选框代替无线电，这样您就可以一次选择和取消选择多个。

然后，扩展您的函数以将每个表单的id传递给hide和show函数：

$('input[type="checkbox"]').change(function() {
  var val = $(this).val();
  $("#info" + val).show();
  if (!$(this).is(':checked')) {
    $("#info" + + val).hide();
  }
});

这是一个更新的小提琴： http://jsfiddle.net/j2x96buL/2/

Answer 2

问题在于您的HTML结构。（根据此JSFiddle ）

你有另一个.content。例如，#content3位于#content2内。

您的代码用于隐藏所有.content并单独显示相应的代码。但只要隐藏了父#content3（，例如），就无法看到#content2。

你怎么能展示隐藏的东西？ confused

因此，您需要正确地重新构建HTML。

旁注：您在同一事件的元素上有多个处理程序，这可能会导致不可预测的行为。您实际上只需要一个，您可以在其中编写所有逻辑：

$("input[type='radio']").change(function () {
  // all the logic goes here
  // no need of a separate handler for doing something else
});

更新（ OP不断更改代码）

根据最新代码，您的单选按钮的值为10，但是匹配#info10，#content10等等。因此不会显示任何内容。

单选按钮选择包含单选按钮的表单，单选按钮选择包含单选按钮的表单

2 个答案: