HTML / JQuery объединить тип ввода: текст в радио

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

Привет, что вы пытаетесь достичь легко, привязав событие click или change к видимости текстового ввода, который вам не нужен для этого в jquery. Если вы используете jquery, вы можете сделать $ ("# radioId"). Change (function () {$ ("textinputId"). Show ()}; если у вас есть текстовый ввод как display: ни один на doc готов. Надеюсь, это не так уж плохо, с телефона ..

Answer 2

Вот как вы могли бы сделать это в более общем смысле: 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();
  });
});

Answer 3

да, это очень просто .. вы можете добиться этого с помощью следующего кода. Во-первых, вы не можете иметь одинаковые идентификаторы, поскольку все входные идентификаторы радио должны отличаться.

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

});