Javascript帮助。向DOM添加/删除表单元素

如果选中单选按钮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?
}

}

//如果选中dateoption2，则在此处添加输入框

最简单的路线是：

<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>

---

最简单的路线是：

<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>

---

您可以使用

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>

函数CheckDateOptions（）{
var o1=document.getElementById（“dateoption1”）；
var o2=document.getElementById（“dateoption2”）；
var eSettings=document.getElementById（“日期设置”）；
如果（o1.选中）{
eSettings.innerHTML=“”；
}否则，如果（o2.已检查）{
eSettings.innerHTML=''；
}
}

---

您可以使用

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>

函数CheckDateOptions（）{
var o1=document.getElementById（“dateoption1”）；
var o2=document.getElementById（“dateoption2”）；
var eSettings=document.getElementById（“日期设置”）；
如果（o1.选中）{
eSettings.innerHTML=“”；
}否则，如果（o2.已检查）{
eSettings.innerHTML=''；
}
}

---

太棒了！去吧，雷伯·麦斯·阿加特：）太棒了！go raibh maith agat:）这不是我想要的，但我在这里也学到了一些东西。谢谢我自己也不确定，但假设这是表单的一部分，使用

display:none

不会导致提交日期设置字段，无论选择了哪个单选按钮？是的，会。您可以在需要时创建/销毁元素，但这似乎不是最简单的方法。奥卡姆剃须刀是我努力遵循的原则，老实说，最简单的答案通常是最好的。这不是我想要的，但我在这里也学到了一些东西。谢谢我自己也不确定，但假设这是表单的一部分，使用

display:none

不会导致提交日期设置字段，无论选择了哪个单选按钮？是的，会。您可以在需要时创建/销毁元素，但这似乎不是最简单的方法。奥卡姆剃刀是我努力遵循的原则，老实说，最简单的答案通常是最好的。