我想做两个单选按钮。他们的名字将是汽车和家。如果我单击汽车，将显示有关汽车部分的输入框，如果我单击家庭，将显示有关家庭的输入框。
我找到了一个关于这个的例子，但我有一个问题。代码如下。
<body>
<script type="text/javascript">
function toggleMe(obj, a)
{
var e=document.getElementById(a);
if(!e)return true;
e.style.display="block"
return true;
}
function toggleMe2(obj, a)
{
var e=document.getElementById(a);
if(!e)return true;
e.style.display="none"
return true;
}
</script>
<form name="theForm">
Type<br>
<input type="radio" name="married" value="yes" onclick="return toggleMe(this, 'Car')"> Car
<input type="radio" name="married" value="yes" onclick="return toggleMe(this, 'Home')"> Home<br>
<div id="Car" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Car InputBox</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
<div id="Home" style="display: none; margin-left: 20px;">
<table>
<tr>
<td>Home InputBox:</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr>
</table>
</div>
</form>
</body>
这些代码的输出
如果我先单击汽车，则会显示汽车部分的输入框。如果我先单击主页，则会显示主页部分的输入框。在我先单击汽车或房屋(无关紧要)后，如果我单击另一个，则会显示两个输入框。
如何解决这个问题？当我单击主页时，应显示主页输入框，当我单击汽车时，也应显示汽车输入框。两者都不是。
最佳答案
HTML
<div>
<input type="radio" name="option" value="car" onclick="toggleInput(this)" /> Car
<input type="radio" name="option" value="home" onclick="toggleInput(this)" /> Home
</div>
<div id="car-input-group" class="hide">
Car InputBox
<input name="name" type="text" />
</div>
<div id="home-input-group" class="hide">
Home InputBox
<input name="name" type="text" />
</div>
Javascript
function toggleInput(obj){
var a =document.getElementsByClassName("hide");
for(var i=0; i<a.length; i++){
a[i].style.display = "none";
}
document.getElementById(obj.value + "-input-group").style.display = "block"
}
CSS
.hide{
display: none
}
关于javascript - 当我传递给另一个单选按钮时，两个按钮的值都会出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28625625/