仅使用Javascript根据选项选择设置单选按钮值
我试图在选择框中选择一个选项的基础上设置一个单选按钮 例如，有5个选择选项可用，如果我选择第一个选项，则应选中第一个单选按钮。其他事情也是如此。我只使用Javascript 我已经尝试了下面的代码仅使用Javascript根据选项选择设置单选按钮值,javascript,html,Javascript,Html,我试图在选择框中选择一个选项的基础上设置一个单选按钮 例如，有5个选择选项可用，如果我选择第一个选项，则应选中第一个单选按钮。其他事情也是如此。我只使用Javascript 我已经尝试了下面的代码 <html> <head> <title>JS Test</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> &
<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>
JS测试
名称
选择号码
1.
2.
3.
4.
5.
选择位置
弗斯特
第二
第三
第四
第五
函数myFunction（）{
var x=document.getElementsByName（“选择值”）.value；
document.getElementsByName（'radio_value'）[x].checked=true；
}
您可以将此代码添加到javascript中
var select = document.getElementsByTagName('select')[0];
select.onchange = function(event) {
var btns = document.querySelectorAll('[name^="radio_value"]');
btns[event.target.value].checked = true
}
以下更改使您的示例生效： 一, 三, 四,
试试这个。它对我有用。获取
选择框的值时，使用parseInt
。我给了选择框一个id
，并在选择单选按钮时使用了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;
}
名称
选择号码
1.
2.
3.
4.
5.
选择位置
弗斯特
第二
第三
第四
第五
函数myFunction（）{
var x=parseInt（document.getElementsByName（“选择值”）[0].value）；
警报（（x））；
document.getElementsByName（'radio_value'）[x-1]。选中=true；
}
试试这个，它工作正常
JS测试
名称
选择号码
1.
2.
3.
4.
5.
选择位置
弗斯特
第二
第三
第四
第五
$（“#选择_值”）。更改（函数（）{
var conceptName=$（“#选择_值”）.find（“：selected”）.text（）；
如果（概念名称=“1”）{
$（'First'）.prop（'checked'，true）；
}
else if（概念名称=“2”）{
$（'#Second'）.prop（'checked'，true）；
}
else if（概念名称=“3”）{
$（'Third'）.prop（'checked'，true）；
}
else if（概念名称=“4”）{
$（“#第四”）.prop（'checked'，true）；
}
否则{
$（'Fifth'）.prop（'checked'，true）；
}
});
在这种特殊情况下，select元素的值与相关单选按钮的索引加1对齐，因此您可以这样做：document.getElementsByName（'radio_value'）[++x]。checked=true
但这不是一个通用的解决方案。@RobG我在我的本地主机上试过你说的，没有选中的单选按钮。啊，是的，你还需要x=document.getElementsByName（“选择值”）[0]。value
。对不起。我无法使用id选择框查看更新的答案。它现在正在使用getElementsByName
。您需要使用[0]
，因为在呈现DOM时，可以通过名称选择许多元素。这就是为什么使用id
是首选。我知道有必要使用id
。但我的情况是我无法使用id。感谢更新的答案。我无法使用此小提琴选择第一个和最后一个单选按钮，请尝试：document.getElementsByName（'radio_value'）[x]。checked=true。提琴：很有魅力。谢谢。请解释一下。我是Javascript方面的新手。我可以知道第一行是什么意思吗？第一行是select元素，之后我们将设置一个事件处理程序，每次select值更改时都会触发。我可以知道为什么我们使用用户[0]
？因为我们需要第一个也是唯一的select元素。我不能使用JQUERY friend。谢谢你的努力
document.getElementsByName("select_value")[0].value;
document.getElementsByName('radio_value')[x].checked=true;
function should be in head section
<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;
}
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>