javascript - 如何添加三个单选按钮，以便每个按钮使用 javascript 显示三种不同的表单？

Question

我有三个表单，如果选择了三个单选按钮之一，我想显示一个表单，如果选择了另一个，则显示另一个表单，依此类推...如何添加三个单选按钮，以便每个按钮使用 javascript 显示三个不同的表单?

Answer 1

Working jsFiddle

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery

$('#form1, #form2, #form3').hide();
$('#formselector').find('input:radio').click(function () {
    var formNum = $(this).val();
    $('#form1, #form2, #form3').hide();
    $('#form' + formNum).show();
});

HTML

<form id="formselector">
    <input type="radio" value="1" name="formsel" />
    <input type="radio" value="2" name="formsel" />
    <input type="radio" value="3" name="formsel" />
</form>
<form id="form1">Hi, I'm form 1!</form>
<form id="form2">Hi, I'm form 2!</form>
<form id="form3">Hi, I'm form 3!</form>

Answer 2

JS：

var selector = document.getElementById('formselect');
var buttons = selector.getElementsByTagName('input');
var forms = document.getElementById('forms').getElementsByTagName('form');

for (var b = 0, len = buttons.length; b < len; b++) {

  buttons[b].addEventListener('click', function() {
    for (var f = 0, l = forms.length; f < l; f++) {

      if (form.id === this.value) {
        form.style.display = 'block';
      } else {
        form.style.display = 'none';
      }

    };
  }, false);
}

在这段代码中，我使“selectform”表单中的所有按钮都能够切换可见表单。有一些方法可以只获得单选按钮，所以如果你坚持这样做，请回复。此外，您并没有真正说明您想如何指定可见表单，所以我使用了单选按钮值。

编辑： 由于某种原因，HTML 没有出现，所以这里是：

HTML：

<form id="formselect">
  <input type="radio" value="form1" />
  <input type="radio" value="form2" />
  <input type="radio" value="form3" />
</form>
<div id="forms">
  <form id="form1"></form>
  <form id="form2"></form>
  <form id="form3"></form>
</div>

我希望这会有所帮助，并且您可以考虑接受这个答案