Question

I’m making a form and would like text input field to be inside of a radio/checkbox input field. What is the right way to do it?

    <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>

I’m not sure if this is necessary but I think it would look good if someone selects ‘No’ option, the text field appears – otherwise it’s hidden. If there’s an easy way to do it with jQuery, I’d be happy to use it.

Answer 1

Here’s how you could do it in a more general sense: http://jsfiddle.net/mYZaQ/62/
There are a few things that have to be consistent about the form though:

• The inputs must be within a label
• The text input must have the name why
• The radiobutton with an extra input field must have the class more
• The text input field has to be directly behind or below the
  radiobutton named 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>  

…and the 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();
  });
});