CODEWITHSUNDEEP
javascripthtmlradio-button
Murat
Murat

Reputation: 72

How can we turn radio button checked when we type its input

As you see below, I have a radio button group that has three options. The last one is text input. Is there any way to make the last one checked when I type something in its text box?

<input type='radio' name='result' value="0"/><label for="0">False</label><br/>
<input type='radio' name='result' value="1"/><label for="1">True</label><br/>
<input type='radio' name='result' value="2"/><label for="2">
<input type="text" placeholder="Type your result" name="result_answ"></label>

Upvotes: 1

Views: 53

Answers (2)

vakata
vakata

Reputation: 3886

Provided you have jQuery loaded use this:

<input type='radio' name='result' value="0"/><label for="0">False</label><br/>
<input type='radio' name='result' value="1"/><label for="1">True</label><br/>
<input type='radio' name='result' value="2"/><label for="2">
<input type="text" placeholder="Type your result" onkeyup="jQuery(this).parent().prev().prop('checked', true)" name="result_answ"></label>

Here is a demo:
http://jsfiddle.net/9q1j36cj/

EDIT: Here is non-jQuery version:

<input type='radio' name='result' value="0"/><label for="0">False</label><br/>
<input type='radio' name='result' value="1"/><label for="1">True</label><br/>
<input type='radio' name='result' value="2"/><label for="2">
<input type="text" placeholder="Type your result" onkeyup="this.parentNode.previousSibling.checked = true" name="result_answ"></label>

http://jsfiddle.net/9q1j36cj/1/

Upvotes: 3

vinayakj
vinayakj

Reputation: 5681

Try below code.

onload = function(){

document.getElementsByName('result_answ')[0].onkeyup = function(){
  if(this.value!==''){
    document.getElementsByName('result')[2].setAttribute('checked', true);
  }else{
    document.getElementsByName('result')[2].removeAttribute('checked')
  }
}

}
<input type='radio' name='result' value="0"/><label for="0">False</label><br/>
<input type='radio' name='result' value="1"/><label for="1">True</label><br/>
<input type='radio' name='result' value="2"/><label for="2">
<input type="text" placeholder="Type your result" name="result_answ"></label>

Upvotes: 0

Related Questions