Question

I have the following HTML

CHOICE 1
<input type="radio" name="c1" value="0" class="a"> Yes
<input type="radio" name="c1" value="1" class="a"> No
<input type="radio" name="c1" value="2" class="a"> Only <input type="text" id="t1" />
<br />
CHOICE 2
<input type="radio" name="c2" value="0" class="a"> Yes
<input type="radio" name="c2" value="1" class="a"> No
<input type="radio" name="c2" value="2" class="a"> Only
<input type="text" id="t2" />
<br />
CHOICE 3
<input type="radio" name="c3" value="0" class="a"> Yes
<input type="radio" name="c3" value="1" class="a"> No
<input type="radio" name="c3" value="2" class="a"> Only
<input type="text" id="t3"  />
<br />
<button>Press me</button>

I want to get the value of the textbox if the radio button selected is “Only”. Any idea on how to do it?

This is my current jQuery script

var arr = new Array();
var rad;
var i = 0;
var id;
$('button').click(function(){

$('input[type="radio"]:checked').each(function(){
rad = $('input[type="radio"]:checked').val();
if(rad == 2){
id = this.id;
arr[i] = $('input[type="text"]#'+id).val();
}
else{
arr[i] = $(this).val();
}
i++;
});
alert(arr);
i = 0;
});

Using this script only gives me repeated value of the textbox. The “Yes” and “No” (0 and 1) values doesnt appear.

Answer 1

Prints the value of the .next() input field to the console when the button was clicked and the “Only” radio was selected.

Demo on jsbin

  $("button").click(function(){
    $("input[type=radio]:checked").each(function(){
      if($(this).val() == 2) {
        console.log($(this).next("input[type=text]").val());
      }
    });
  });