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>

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

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

2 个答案: