Hide/show 个基于比例选择的问题

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 以隐藏输入 phone 和电子邮件，除非他们 select 同意我的问题。我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，请试试这个。

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 2

这样的事情怎么样？

<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

Answer 3

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

$(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();
    }
  });

});

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

Answer 4

自从您标记 jQuery：

在您想要的部分周围添加包装纸 show/hide。使用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 5

如果您想要一个纯粹的 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>

Hide/show 个基于比例选择的问题

Hide/show questions based on choices in a ratio

html

javascript

forms

jquery

toggle