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，除非他们为我的问题选择了“是”。我在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/

Answer 2

如果你想要一个纯JavaScript（没有jQuery）解决方案，那么你可以去：

var radio = document.getElementsByName('example');

var inputContainer = document.getElementById('inputContainer');
var phoneInput = document.getElementById('phone');

for (var i = 0; i < radio.length; ++i) {
  radio[i].onclick = function() {
    if (this.value == "yes") {
      inputContainer.style.display = "block";
    } else {
      inputContainer.style.display = "none";
    }
  }
}

<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="inputContainer">
    <h6>Please enter the information below:</h6>
    <input id="email" name="email" placeholder="youremail@example.com" type="email">
    <br>
    <br>
    <input id="phone" name="phone" placeholder="(###)###-####" type="tel">
    <br>
    <br>
  </div>
  <input value="Continue" type="submit">
</form>

Answer 3

您将为单选按钮绑定change事件的事件处理程序。在那里，您可以检查选择了哪个单选按钮，并在元素上使用show或hide方法。（有一些变体，一些更好，更短，但这非常接近你的伪代码）：

＆＃13;

$(document).ready(function(){

  $('input[name=example]').change(function(){
    if ($('input[name=example]:checked').attr('value') === 'yes') {
      $('input[name=phone]').show();
      $('input[name=email]').show();
    } else {
      $('input[name=phone]').hide();
      $('input[name=email]').hide();
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="code" method="get">
<br><h6>My question here:<br>
<input name="example" value="yes" type="radio" checked>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>

＆＃13;

Answer 4

如果您使用jQuery，请尝试此操作。

function change_attributes(myform){
        if(myform.ratio.selectedIndex === 'yes'){
            myform.find('input[name=phone]').show();
            myform.find('input[name=email]').show();
        }else{
            myform.find('input[name=phone]').hide();
            myform.find('input[name=email]').hide();
        }
     }

Answer 5

这样的事情怎么样？

<form action="code" method="get">
    <h6>My question here:</h6>
    <input name="example" value="yes" type="radio" onclick="$('#to-hide').show();">Yes<br />
    <input name="example" value="no" type="radio" onclick="$('#to-hide').hide();">No<br />
    <div id="to-hide" style="display: none;">
        <h6>Please enter the information below:</h6>
        <input name="email" placeholder="youremail@example.com" type="email"><br><br>
        <input name="phone" placeholder="(###)###-####" type="tel">
    </div>
    <br /><br />
    <input value="Continue" type="submit">
</form>

jsfiddle here

根据比率选择隐藏/显示问题

5 个答案: