javascript - 根据比例隐藏/显示问题

Question

我的代码:

<form action="code" method="get">
<br><h6>My question here:<br>
<input name="example" value="yes" type="radio">Yes<br>
<input name="example" value="no" type="radio">No<br></h6>
<h6>Please enter the information below:</h6>
<input name="email" placeholder="youremail@example.com" type="email"><br><br>
<input name="phone" placeholder="(###)###-####" type="tel">
<br><br><input value="Continue" type="submit">
</form>

现在我需要添加 JavaScript 来隐藏输入的电话和电子邮件，除非他们为我的问题选择"is"。我的 JavaScript 真的很糟糕，我可以阅读它，但不会从头开始编写它。它需要类似于:

function change_attributes(myform){
    if(myform.ratio.selectedIndex === yes){
        myform.input(phone) = .show;
        myform.input(email) = .show;
    }else{
        myform.input(phone) = .hiden;
        myform.input(email) = .hiden;
    }
 }

Answer 1

自从您标记 jQuery 以来:

在您想要显示/隐藏的部分周围添加一个包装器。使用jQuery的切换功能。

http://api.jquery.com/toggle/#toggle-display

jQuery:

$('[name="example"]').click(function () {
        $('#optionalInfo').toggle((this.value == 'yes'))
})

HTML:

<form action="code" method="get">
    <br>
     <h6>My question here:<br>
<input name="example" value="yes" type="radio">Yes<br>
<input name="example" value="no" type="radio">No<br></h6>

    <div id="optionalInfo">

<h6>Please enter the information below:</h6>

        <input name="email" placeholder="youremail@example.com" type="email">
        <br>
        <br>
        <input name="phone" placeholder="(###)###-####" type="tel">
        <br>
        <br>
    </div>
    <input value="Continue" type="submit">
</form>

CSS:

#optionalInfo{
    display: none;
}

演示:

http://jsfiddle.net/SeanWessell/csroot23/