在选择列表中获取单选按钮值

Question

我有HTML和Javascript代码，可以在单选按钮中选中选项值。

而不是我需要反向，意味着需要在选择选项中获得单选按钮检查值。

感谢您的帮助提前....

这里是我的代码

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

Answer 1

附上一个div里面所有的单选按钮，并添加一个onclick监听器是这样的：

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

这不是一个完美的解决方案，但为您的需要提供了一个简单的解决方法。

Answer 2

如果你想修改基于所选指数，而不是价值的单选按钮select指数，你可以使用这个小功能getCheckedRadioIndex得到当前选择的无线电索引，然后只需编程选择里面的选项收音机的onclick事件。

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>