html/jquery 组合输入类型：收音机中的文本答案

【问题标题】：html/jquery combine input type: text within radiohtml/jquery 组合输入类型：收音机中的文本
【发布时间】：2012-01-20 09:03:46
【问题描述】：

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

    <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 的简单方法，我会很乐意使用它。

【问题讨论】：

首先，不应该有多个具有相同id 的元素。也更正确地为收音机的每个文本注释放置单独的label 标签，例如：<label><input name="Q01" id="Q01" type="radio" value="Q1_A01" />Yes</label>，所以如果你点击它的标签，收音机也会改变它的状态。现在，监听更改事件并在需要时显示额外的文本字段有什么问题？
你说得对，我已经编辑了问题。

标签： jquery html forms input

【解决方案1】：

以下是更一般意义上的操作方法：http://jsfiddle.net/mYZaQ/62/
不过，有几件事必须与表单保持一致：

输入必须在label 内
文本输入必须具有名称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();
  });
});

【讨论】：

这看起来不错！如果表格中有更多这些内容，我是否必须为每个问题每次都重写它？
这在一定程度上取决于您希望复选框如何工作，但请尝试上述方法。我也更新了jsfiddle。我认为最好提出一个新问题，而不是扩展这个答案。每个问题都应尽可能具体。

【解决方案2】：

您好，通过将单击或更改事件绑定到您并不真正需要 jquery 的文本输入的可见性，您想要实现的目标很容易。如果您使用的是 jquery，则可以 $("#radioId").change(function(){$("textinputId").show()}; 如果您将文本输入作为 display:none 在文档准备好。希望这个还不错，来自电话..

【讨论】：

【解决方案3】：

是的，这很简单.. 您可以通过以下代码实现此目的首先，对于所有输入收音机的 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>

脚本 jQuery

$(document).ready(function () {

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

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

});

【讨论】：

对应label的问题，最好不要使用change事件click。
onchange 事件对 IE 浏览器有一些问题，这是我更喜欢 onclick 的唯一原因。反正那不是问题..