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 索引，则可以使用此小功能{{1}获取当前选定的无线电索引，然后以编程方式选择无线电的getCheckedRadioIndex事件中的选项。

＆＃13;

onclick

＆＃13;

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';
  };
}

＆＃13;

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

2 个答案: