how to open different form on different radio button

问题

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>

回答1:

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>

回答2:

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

回答3:

More simple (using 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()});

来源：https://stackoverflow.com/questions/42488260/how-to-open-different-form-on-different-radio-button

标签

javascript

jquery

html

css