Question

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

例如，有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

Answer 1

您可以将此代码添加到您的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

Answer 2

以下更改会使您的示例正常工作：

1

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

2

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

3

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

4

function should be in head section

Working Fiddle

Answer 3

试试这个。它对我有用。获取parseInt的值时使用select box。我向id提供了select box，并在选择x-1时使用radio buttons，因为他们的索引从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 个答案:

Working Fiddle