当我传递给另一个单选按钮时，两个按钮的值都来了答案

【问题标题】：When I pass to another radio button both buton's values come当我传递给另一个单选按钮时，两个按钮的值都来了
【发布时间】：2015-02-20 17:50:54
【问题描述】：

我想做两个单选按钮。他们的名字将是汽车和家。如果我点击汽车，将显示一个关于汽车部分的输入框，如果我点击主页，将显示一个关于家庭的输入框。

我找到了一个关于此的示例，但我对此有疑问。代码如下。

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

这些代码的输出

如果我先点击汽车，会显示汽车部分的输入框。如果我先点击主页，会显示主页部分的输入框。在我先点击汽车或家之后（没关系），如果我点击另一个，两个输入框都会显示。

我该如何解决这个问题？当我点击 home 时，应该显示 home 输入框，当我点击 car 时，也应该显示 car 输入框。不是他们两个。

【问题讨论】：

我删除了一大块与这个问题无关的代码。

标签： javascript html forms select

【解决方案1】：

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
}

工作示例：http://plnkr.co/edit/wPdTldCXG0LTJWEtzIxE?p=preview

【讨论】：

感谢您的示例。它使您的解决方案清晰

【解决方案2】：

这个呢？使用 jquery 更容易。我把它变成了通用的，所以你可以添加更多的单选按钮（使用 myradio 和 myinput css 类）而不用接触 JS。

$( "input.myradio" ).click(function() {
    $( "div.myinput").hide();
    $( "div#"+$(this).attr('id')).toggle( "slow", function() {
    // Animation complete.
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="theForm">
    Type<br>
    <input id="Car" type="radio" name="married" class="myradio" value="yes" />Car
    <input id="Home" type="radio" name="married" class="myradio" value="yes" />Home<br>
    <div id="Car" class="myinput" 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" class="myinput" 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>

JSFiddle

【讨论】：

很酷的动画！ :) 谢谢！