如何在不同的單選按鈕上打開不同的表單

Question

我有三個單選按鈕，我希望默認選中我的一個單選按鈕，然後形成「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類的窗體。在無線電輸入改變時，使用自定義屬性（在這種情況下爲數據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()});