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

是的，这很简单.. 您可以通过以下代码实现此目的首先，你不能拥有相同的id，所有输入无线电的id应该是不同的。

<form>
    <label for="Q01">
     Question 1:
     <input name="Q01" id="Q01" type="radio" value="Q1_A01" />Yes <br />
     <input name="Q01" id="Q02" type="radio" value="Q1_A02" />No, why?<input type="text" name="reason" id="reason" class="noreason" /><br />
     <input name="Q01" id="Q02" type="radio" value="Q1_A03" />I don't know <br />
    </label>
    </form>

SCRIPT jQuery

$(document).ready(function () {

 $(".noreason").css("display", "none");
 $("#Q02").click (function() {

  if ($(this).checked == true )
  {
       $(".noreason").css("display", "block");
  }
 })

});

Answer 2

您希望通过将单击或更改事件绑定到文本输入的可见性来实现您想要实现的目标，您实际上并不需要jquery。如果你正在使用jquery，你可以做$（“＃radioId”）。change（function（）{$（“textinputId”）。show（）};如果你有文本输入为display：none on doc ready。希望这个来自电话也不错。

Answer 3

以下是您可以在更广泛的意义上做到这一点：http://jsfiddle.net/mYZaQ/62/
但是有一些事情必须与表格保持一致：

输入必须在label
文字输入的名称必须为why
带有额外输入字段的单选按钮必须具有类more
文本输入字段必须直接位于后面或下面 radiobutton名为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();
  });
});

html / jquery组合输入类型：无线电中的文本

3 个答案: