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

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类的窗体。 在无线电输入发生更改时，请使用自定义属性（在这种情况下为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> 

Answer 2

你可以这样做。 https://jsfiddle.net/75a7p9qa/2/

<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">a</div>
<div class="form-b" style="display: none">b</div>
<div class="form-c" style="display: none">c</div>
<script type="text/javascript">
$(document).ready(function() {
  $('input[name=colorCheckbox]:radio').change(function(e) {
    let value = e.target.value.trim()

    $('[class^="form"]').css('display', 'none');

    switch (value) {
      case 'red':
        $('.form-a').show()
        break;
      case 'green':
        $('.form-b').show()
        break;
      case 'blue':
        $('.form-c').show()
        break;
      default:
        break;
    }
  })
})
</script>

Answer 3

更简单（使用jQuery）： https : //jsfiddle.net/0s96dgq8/

HTML：

<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 form-red">red</div>
<div class="form form-green">green</div>
<div class="form form-blue">blue</div>

JavaScript的：

function selectForm() {
  $("div.form").hide();
  $("div.form-" + $("input:checked").val()).show();
}
selectForm();
$("input").click(function(){selectForm()});