別のラジオボタンで別のフォームを開く方法

Question

私は3つのラジオボタンを持っています。私は1つのラジオボタンをデフォルトでチェックし、別のラジオボタンをクリックするまで "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

あなたはこれを行うことができます。 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 2

は（私はあなたのマークアップを使用）あなたのアイデアを与えるために簡単な例です。

基本的にすべてのフォームを非表示にし、.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 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()});