Question

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

我找到了一个关于此的例子，我有一个问题。代码如下。

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

输出这些代码

如果我先点击汽车，会显示汽车部分的输入框。如果我先单击主页，则会显示主页部分的输入框。在我点击汽车或家中之后（无所谓）如果我点击另一个，则会显示两个输入框。

我该如何解决这个问题？当我点击主页时，应显示主页输入框，当我点击汽车时，也应显示汽车输入框。不是两个都。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle

Answer 2

<强> 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 个答案: