javascript - 仅使用 Javascript 根据选项选择设置单选按钮值

标签 javascript html

我正在尝试根据选择框中的选项来设置单选按钮。

例如,有 5 个可用选项,如果我选择第一个选项,则应选中第一个单选按钮。其余的事情也是如此。我只使用 Javascript。

我已经尝试过以下代码。

<html>
  <head>
    <title>JS Test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
  </head>
  <body>
        <div></div>
        <div>
            <form name="myform" action="">
                <label for="name">Name</label>
                    <input type="text" name="name"></input>
                <br>    
                    <label for="select_value" onchange="myFunction()">Select Number</label>
                    <select name="select_value">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                <br>
                    <label for="radio_value">Select Position</label>
                    <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>
                <br>
                    <input type="submit" name="form_submit" value="Submit"></input>
            </form>
        </div>
        <script type="text/javascript">
        function myFunction() {
                var x = document.getElementsByName("select_value").value;
                document.getElementsByName('radio_value')[x].checked=true;
        }
    </script>
  </body>
</html> 

JSFIDDLE

最佳答案

您可以将此代码添加到您的 JavaScript 中

var select = document.getElementsByTagName('select')[0];

select.onchange = function(event) {
    var btns = document.querySelectorAll('[name^="radio_value"]');

    btns[event.target.value].checked = true
}

working example

文档

Events

Selectors

关于javascript - 仅使用 Javascript 根据选项选择设置单选按钮值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27658178/

相关文章:

user-interface - 在没有 JS 的情况下,我应该使用什么策略进行多房间预订选择?

javascript - 恢复到以前版本的 jQuery

javascript - coin-slider js gallery,想添加淡入淡出效果

jquery - 使用jquery设置di​​v标签的值

html - font awesome 在具有自定义类和行类的 div 中显示不佳

javascript - 使用 Jquery 检测选择列表的更改

javascript - 使用 twilio 函数从 twilio <gather> 获取音频数据

python - 如何让 Beautiful Soup 从 href 和 class 获取链接?

javascript - 将 Unicode 字符插入 JavaScript

Javascript:了解文件接口(interface)