如何在不同的单选按钮上打开不同的表单 [英] how to open different form on different radio button

问题描述

我有三个单选按钮，我希望我的一个单选按钮默认选中并且表单a"保持打开状态，直到用户单击另一个单选按钮.下面的表格随单选按钮而变化；

代码如下:

红色<label><input type="radio" name="colorCheckbox" value="green">绿色<label><input type="radio" name="colorCheckbox" value="blue">蓝色</label><div class="form-a" >

<div class="form-b​​" >

<div class="form-c" >

解决方案

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

<input type="radio" name="colorCheckbox" value="red"已选中>红色<标签><input type="radio" name="colorCheckbox" value="green">绿色<标签><input type="radio" name="colorCheckbox" value="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) {让值 = e.target.value.trim()$('[class^="form"]').css('display', 'none');开关(值){案例红色":$('.form-a').show()休息;案例绿色":$('.form-b​​').show()休息;案例蓝色":$('.form-c').show()休息;默认:休息;}})})

i have three radio button, i want that my one radio button checked by default and form "a" remains open untill the user click on another radio button. The form below change with respect to the radio button;

Here is the code:

<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>

解决方案

You can do this. 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>

这篇关于如何在不同的单选按钮上打开不同的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！