javascript - how to open different form on different radio button - Stack Overflow

admin管理员组

文章数量:1022949

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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 27, 2017 at 14:31 andreas 17k1313 gold badges7878 silver badges8181 bronze badges asked Feb 27, 2017 at 14:29 Harris KhanHarris Khan 2471111 silver badges2626 bronze badges 3

• what do you means by form a open ? – Rahul Commented Feb 27, 2017 at 14:31
• show the form to the user – Harris Khan Commented Feb 27, 2017 at 14:33
• You can get the value of radio button in script and based on the value you can hide and show the required form. – Pankaj Kumar Singh Commented Feb 27, 2017 at 14:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here is a quick example to give you an Idea (I used your markup).

Basically, hide every forms and show only the one that have the .active class. On radio inputs change, use a custom attribute (data-id in this case) to add the .active class to the correct form.

$(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./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>

You can do this. https://jsfiddle/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>

More simple (using jQuery): https://jsfiddle/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()});

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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 27, 2017 at 14:31 andreas 17k1313 gold badges7878 silver badges8181 bronze badges asked Feb 27, 2017 at 14:29 Harris KhanHarris Khan 2471111 silver badges2626 bronze badges 3

• what do you means by form a open ? – Rahul Commented Feb 27, 2017 at 14:31
• show the form to the user – Harris Khan Commented Feb 27, 2017 at 14:33
• You can get the value of radio button in script and based on the value you can hide and show the required form. – Pankaj Kumar Singh Commented Feb 27, 2017 at 14:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here is a quick example to give you an Idea (I used your markup).

Basically, hide every forms and show only the one that have the .active class. On radio inputs change, use a custom attribute (data-id in this case) to add the .active class to the correct form.

$(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./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>

You can do this. https://jsfiddle/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>

More simple (using jQuery): https://jsfiddle/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()});

本文标签： javascripthow to open different form on different radio buttonStack Overflow