如何添加三个单选按钮，以便每个按钮在 JavaScript 中显示三个不同的表单

how to add three radio buttons so that with each button three different forms appear with javascript?

本文关键字：三个 JavaScript 显示 按钮 表单 添加 何添加 单选按钮      更新时间：2023-09-26

我有三个表单，如果选择了三个单选按钮中的一个，我想显示一个表单，如果选择了另一个单选按钮，则显示另一个表单，依此类推......如何添加三个单选按钮，以便每个按钮出现三个不同的表单与 JavaScript ？

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>

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

在此代码中，我使"选择表单"形式的所有按钮都能够切换可见表单。有一些方法可以只获得单选按钮，所以如果你坚持这一点，请回复。另外，您并没有真正说明要如何指定可见表单，因此我使用了单选按钮值。

编辑：由于某种原因，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>

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

相关文章：