Get radio button value in selection list

Question

I have HTML and Javascript code to get selected option value checked in radio button.

instead of this i need reverse, means need to get radio button checked value in select options.

Thanks for your help in Advance....

Here is my code

<form name="myform" action="">
<label for="select_value" onchange="myFunction()">
<select name="select_value">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" value="First">First
<input type="radio" name="radio_value" value="Second">Second
<input type="radio" name="radio_value" value="Third">Third
<input type="radio" name="radio_value" value="Fourth">Fourth
<input type="radio" name="radio_value" value="Fifth">Fifth
</form>
<script>
function myFunction() {
    var x = document.getElementsByName("select_value").value;
    document.getElementsByName('radio_value')[x].checked = true;
}
var select = document.getElementsByTagName('select')[0];
select.onchange = function (event) {
    var btns = document.querySelectorAll('[name^="radio_value"]');
    btns[event.target.value].checked = true
}
</script>

[`getElementsByName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName) returns a live NodeList Collection — Dhaval Marthak, May 25 '17 at 05:13
Possible duplicate of [How to get value of selected radio button?](https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button) — A. L, May 25 '17 at 05:23
Try making a jsFiddle or something - that can better show what you want - something like this: https://jsfiddle.net/sheriffderek/b56aLnnz/ — sheriffderek, May 25 '17 at 06:14

score 0 · Accepted Answer · answered May 25 '17 at 05:39

Enclose all your radio buttons inside a div and add an onclick listener like this :

<form name="myform" action="">

<label for="select_value" onchange="myFunction()">Select Number</label>




<select id="select_value">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<div onclick="myFunction()">
<input type="radio" name="radio_value" value="First">First</input>
<input type="radio" name="radio_value" value="Second">Second</input>
<input type="radio" name="radio_value" value="Third">Third</input>
<input type="radio" name="radio_value" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" value="Fifth">Fifth</input>
</div>
</form>
<script>
function myFunction() {
    var buttons = document.getElementsByName('radio_value');
    for(var i = 0;i < buttons.length;i ++) {
        if(buttons[i].checked == true) document.getElementById('select_value').value = i;
    }
}
</script>

This is not a perfect solution.But a simple workaround for your need.

This is what i exactly needed, Thanks for the answer @vinoth. — kumar, May 25 '17 at 06:18

Toribio · Answer 2 · 2017-05-25T05:58:25.477

If you want to modify the select index based on the radio buttons selected index and not value, you can use this little function getCheckedRadioIndex to get the current selected radio index, and then just programatically select the option inside the onclick event for the radios.

function getCheckedRadioIndex(radios) {
  for (var i = 0; i < radios.length; i++)
    if (radios[i].checked) return i;
}

var radios = document.querySelectorAll('input[name=radio_value]');
var options = document.querySelectorAll('select[name=select_value]>option');

for (var i = 0; i < radios.length; i++) {
  radios[i].onclick = function(event) {
    var index = getCheckedRadioIndex(radios);
    options[index].selected = 'selected';
  };
}

<form name="myform" action="">
  <label for="select_value">Select Number</label>

  <select name="select_value">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <br>
  <label for="radio_value">Select Position</label>
  <input type="radio" name="radio_value" value="First">First
  <input type="radio" name="radio_value" value="Second">Second
  <input type="radio" name="radio_value" value="Third">Third
  <input type="radio" name="radio_value" value="Fourth">Fourth
  <input type="radio" name="radio_value" value="Fifth">Fifth
</form>

Get radio button value in selection list

2 Answers2