javascript - 如何在不同的单选按钮上打开不同的表单

Question

我有三个单选按钮，我希望我的一个单选按钮默认选中并且表单“a”保持打开状态，直到用户单击另一个单选按钮。下面的表格相对于单选按钮发生变化；

代码如下:

<label><input type="radio" name="colorCheckbox" value="red" checked> red</label>
<label><input type="radio" name="colorCheckbox" value="green"> green</label>
<label><input type="radio" name="colorCheckbox" value="blue"> blue</label>

<div class="form-a" > </div>
<div class="form-b" > </div>
<div class="form-c" > </div>

Answer 1

这是一个简单的例子，可以给你一个想法(我使用了你的标记)。

基本上，隐藏所有表单并仅显示具有 .active 类的表单。在 radio 输入更改时，使用自定义属性(在本例中为 data-id)将 .active 类添加到正确的表单中。

$(document).ready(function() {
  $('.form-switch').on('change', function() {
    $('.form').removeClass('active');
    var formToShow = '.form-' + $(this).data('id');
    $(formToShow).addClass('active');
  });
});

.form {
  display: none;
}
.form.active {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" class="form-switch" name="colorCheckbox" value="red" data-id="a" checked> red</label>
<label><input type="radio" class="form-switch" name="colorCheckbox" value="green" data-id="b"> green</label>
<label><input type="radio" class="form-switch" name="colorCheckbox" value="blue" data-id="c"> blue</label>

<div class="form form-a active"> form a </div>
<div class="form form-b"> form b </div>
<div class="form form-c"> form c</div>