jquery - html/jquery组合输入类型: text within radio

Question

我正在制作一个表单，并希望文本输入字段位于单选/复选框输入字段内。正确的做法是什么？

    <form>
     Question 1:
     <label for="Q01_A01"><input name="Q01" id="Q01_A01" type="radio" value="Q01_A01" />Yes </label>
     <label for="Q01_A02"><input name="Q01" id="Q01_A02" type="radio" value="Q01_A02" />No, why? ...TEXT FIELD HERE.....</label>
     <label for="Q01_A03"><input name="Q01" id="Q01_A03" type="radio" value="Q01_A03" />I don't know </label>
    </form>

我不确定这是否有必要，但我认为如果有人选择“否”选项，文本字段就会出现 - 否则它会被隐藏，看起来会很好。如果有一种简单的方法可以使用 jQuery 实现这一点，我很乐意使用它。

Answer 1

以下是更一般意义上的执行方法:http://jsfiddle.net/mYZaQ/62/
不过，有一些事情必须与表单保持一致:

• 输入必须位于标签内
• 文本输入的名称必须为why
• 带有额外输入字段的单选按钮必须具有类more
• 文本输入字段必须位于文本输入字段的正后方或下方 名为 why
的单选按钮

HTML:

<form>
<label for="Q01">
    Question 1:<br/>
 <input name="Q01" id="Q1_A01" type="radio" value="Q1_A01" />Yes <br />
 <input name="Q01" id="Q1_A02" type="radio" value="Q1_A02" class="more" />No, why?
    <input name="why" id="Q1_A03" type="text" value="" /><br />
 <input name="Q01" id="Q1_A04" type="radio" value="Q1_A04" />I don't know <br />
</label>
<br />
<label for="Q02">
    Question 2:<br/>
 <input name="Q02" id="Q2_A01" type="checkbox" value="Q2_A01" />Yes <br />
 <input name="Q02" id="Q2_A02" type="checkbox" value="Q2_A02" class="more" />No, why?
    <input name="why" id="Q2_A03" type="text" value="" /><br />
 <input name="Q02" id="Q2_A04" type="checkbox" value="Q2_A04" />I don't know <br />
</label>
</form>  

...和 ​​jquery:

$(document).ready(function() {
  $("input[name$='why']").hide();

  $("label input[type='radio']").change(function() {
    if ($(this).hasClass('more')) $(this).next().show();
    else $(this).parent().children("input[type='text']").hide();
  });

  $("label input[type='checkbox']").change(function() {
    if ($(this).hasClass('more')) $(this).next().toggle();
  });
});