Javascript幫助。添加/刪除表單元素到DOM

Question

如果單選按鈕2被選中，則將輸入框添加到日期設置中。我如何添加輸入框？如果單選按鈕1被選中，則除了先前選中按鈕2以外，什麼也不做。你能幫我

感謝

function CheckDateOptions() { 
var o1 = document.getElementById("dateoption1"); 
var o2 = document.getElementById("dateoption2"); 
var eSettings = document.getElementById("datesettings"); 
if(o1.checked) { 
    //Remove o2 children 
} 
else if(o2.checked) { 
    //How do I add an input box? 
} 

}

<input type="radio" id="dateoption1" name="dateoption" value="1" onclick="CheckDateOptions();"> 
<input type="radio" id="dateoption2" name="dateoption" value="2" onclick="CheckDateOptions();"> 

<span id="datesettings">//Add input box here if dateoption2 is checked</span> 

Answer 1

您可以使用innerHTML添加輸入字段。

像這樣的東西應該爲你工作

<script type="text/javascript"> 
    function CheckDateOptions() { 
     var o1 = document.getElementById("dateoption1"); 
     var o2 = document.getElementById("dateoption2"); 
     var eSettings = document.getElementById("datesettings"); 
    if(o1.checked) { 
     eSettings.innerHTML = ""; 
    } else if(o2.checked) { 
     eSettings.innerHTML = '<input type="text" name="field" />'; 
    } 
} 
</script> 

<input type="radio" id="dateoption1" name="dateoption" value="1" onclick="CheckDateOptions()"/> 
<input type="radio" id="dateoption2" name="dateoption" value="2" onclick="CheckDateOptions()"/> 

<span id="datesettings"></span> 

Demo

Answer 2

最簡單的路線是：

<input type="radio" id="dateoption1" name="dateoption" value="1" ="ToggleDateOptions(true);" /> 
<input type="radio" id="dateoption2" name="dateoption" value="2" ="ToggleDateOptions(false);" /> 

<span id="datesettings"> 
    <input type="text" id="dateSetting" /> 
</span> 

<script> 
    function ToggleDateOptions(oneChecked) { 
if(oneChecked) 
{ 
    $("#dateSetting").hide(); 
} 
else 
{ 
    $("#dateSetting").show(); 
} 
} 
</script> 

或者，如果你不想使用jQuery（這是以上使用）你可以這樣做：

if(oneChecked) 
    { 

     document.getElementById("dateSetting").style.display = 'none'; 
    } 
    else 
    { 
     document.getElementById("dateSetting").style.display = 'inline'; 
    }