在電臺選擇顯示特定值

Question

我試圖在選擇特定的單選按鈕時顯示特定的表格。

下面是單選按鈕： -

<input type="radio" name="condition" value="working" id="condition"> 
<input type="radio" name="condition" value="workingdamaged" id="condition"> 
<input type="radio" name="condition" value="notworking" id="condition"> 

當我們選擇工作收音機，不同的形式需要被打開了。當我們選擇非工作不同的表單需要在那裏。

最初，我是通過document.getElementById（「demo」）。innerHTML，但我建議在innerHTML中使用太多的表單不是一個好主意。 那麼我完成這個任務的最好方法是什麼？

歡迎任何建議。

Answer 1

我能想到用數據的最簡單的方法屬性指選自單選按鈕對應的形式的元素。

我們所要做的就是用一個單選按鈕「數據型=‘工作’」映射到特定形式的ID爲「工作」

示例代碼看起來像：

$("form").hide(); 

$("input:radio").on("change", function() { 
    $("form").hide(); 
    $("#" + $(this).attr("data-form")).show(); 
}); 

HTML標記應該是這樣的：

<input type="radio" data-form="working" value="working" name="condition"> 
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition"> 
<input type="radio" data-form="notworking" value="notworking" name="condition"> 

<form id="working"> 
    <h2>working form</h2> 
</form> 

<form id="workingdamaged"> 
    <h2>workingdamaged form</h2> 
</form> 

<form id="notworking"> 
    <h2>notworking form</h2> 
</form> 

Fiddle Demo

Answer 2

您的解決方案很好，我沒有看到任何重大問題。

您也可以將所有表單添加到DOM，並切換其可見性。

例如：

<form id="form-working" style="display: none"></form> 
<form id="form-workingdamaged" style="display: none"></form> 
<form id="form-notworking" style="display: none"></form> 

<input type="radio" name="condition" value="working" id="condition-working"> 
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged"> 
<input type="radio" name="condition" value="notworking" id="condition-notworking"> 

<script> 
var forms = ['working', 'workingdamaged', 'notworking']; 

function switch(form) { 
    for (var k in forms) { 
    forms[k].style.display = 'none'; 
    } 

    document.getElementById('form-' + name).style.display = 'block'; 
} 

var elements = document.getElementsByName('condition'); 

for (var k in elements) { 
    elements[k].onclick = function() { 
    if (this.cheked) { 
     switch(this.getAttribute('value')); 
    } 
    } 
} 

</script> 

編輯：你必須改變要素的標識。 ID必須是唯一的

你也可以考慮使用模板或外部庫。

Answer 3

你可以看看這個問題。它可能符合你的目的。

Show form on radio button select

Answer 4

<input type="radio" name="condition" class="selectradio" value="working" selection="select1"> 
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2"> 
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3"> 

給他們不同的ID此

創建這樣的模型。

<div class=content> 
    <div class="subcontent" style="display:none" id="select1">//content</div> 
    <div class="subcontent" style="display:none" id="select2">//content</div> 
    <div class="subcontent" style="display:none" id="select3">//content</div> 
</div> 

<script> 
$(function(){ 

$('.selectradio').change(
    function(){ 
     var sourced=$(this).attr("selection") ; 
     $(".subcontent").hide(); 
     $("#"+sourced).show(); 
    } 
);   

}); 

</script> 

你必須包括jquery庫。