基于仅使用Javascript的选项设置单选按钮值

Question

I am trying to set a radio button based on selecting an option in a select box. 我试图基于在选择框中选择一个选项来设置单选按钮。

For example, There are 5 select options available, If I select the first option, first radio button should be checked. 例如，有5个选择选项可用，如果我选择第一个选项，则应选中第一个单选按钮。 Likewise for the rest of the things. 其余的事情也一样。 I am working only with Javascript. 我只使用Javascript。

I have tried the below code. 我尝试了下面的代码。

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

Answer 1

You can add this code to your javascript 您可以将此代码添加到您的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 工作实例

Documentation 文档

Events 活动

Selectors 选择

Answer 2

Following changes makes your example work : 进行以下更改可使您的示例工作：

1. 1。

<select name="select_value" onchange="myFunction()">

2. 2。

document.getElementsByName("select_value")[0].value;

3. 3。

document.getElementsByName('radio_value')[x].checked=true;

4. 4。

function should be in head section

Working Fiddle 工作小提琴

Answer 3

Try this. 尝试这个。 It is working for me. 它为我工作。 Use parseInt when getting the value of the select box . 获取select box的值时，请使用parseInt 。 I have given an id to the select box and have used x-1 while selecting the radio buttons as their index starts from 0 . 我为select box指定了id ，并在选择radio buttons时使用x-1 ，因为它们的索引从0开始。

<form name="myform" action="">
        <label for="name">Name</label>
            <input type="text" name="name"></input>
        <br>    
            <label for="select_value" >Select Number</label>
            <select name="select_value" onchange="myFunction()">
                <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 = parseInt(document.getElementsByName("select_value")[0].value);
        alert((x));
        document.getElementsByName('radio_value')[x-1].checked=true;
}

Answer 4

Try this out its working fine

<html>
                  <head>
                  <script src="http://code.jquery.com/jquery-latest.min.js"
                        type="text/javascript"></script>
                    <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">Select Number</label>
                                    <select name="select_value" id = "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" id = "First" value="First">First</input>
                                    <input type="radio" name="radio_value" id="Second" value="Second">Second</input>
                                    <input type="radio" name="radio_value" id="Third" value="Third">Third</input>
                                    <input type="radio" name="radio_value" id="Fourth" value="Fourth">Fourth</input>
                                    <input type="radio" name="radio_value" id="Fifth" value="Fifth">Fifth</input>
                                <br>
                                    <input type="submit" name="form_submit" value="Submit"></input>
                            </form>
                        </div>

                  </body>
                    <script type="text/javascript">

                        $( "#select_value" ).change(function() {

                            var conceptName = $('#select_value').find(":selected").text();
                            if(conceptName=="1"){
                                $('#First').prop('checked',true);
                            }
                            else if(conceptName=="2"){

                                $('#Second').prop('checked',true);
                            }
                            else if(conceptName=="3"){

                                $('#Third').prop('checked',true);
                            }
                            else if(conceptName=="4"){

                                $('#Fourth').prop('checked',true);
                            }
                            else{

                                $('#Fifth').prop('checked',true);
                            }

                        });

                    </script>
                </html>

基于仅使用Javascript的选项设置单选按钮值

问题描述

4 个解决方案

解决方案1
2 已采纳 2014-12-26 14:18:19

解决方案2
2 2014-12-26 14:21:50

Working Fiddle 工作小提琴

解决方案3
1 2014-12-26 14:24:02

解决方案4
0 2014-12-26 14:32:43

基于仅使用Javascript的选项设置单选按钮值

问题描述

4 个解决方案

解决方案1 2 已采纳 2014-12-26 14:18:19

解决方案2 2 2014-12-26 14:21:50

Working Fiddle 工作小提琴

解决方案3 1 2014-12-26 14:24:02

解决方案4 0 2014-12-26 14:32:43

解决方案1
2 已采纳 2014-12-26 14:18:19

解决方案2
2 2014-12-26 14:21:50

解决方案3
1 2014-12-26 14:24:02

解决方案4
0 2014-12-26 14:32:43