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

• 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

3 Answers 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()});