如果单选按钮选中使用dom添加新的表单元素？

Question

如何在Javascript中使用DOM来检查是否选中了单选按钮，然后如果是这样，则将新表单元素添加到日期设置中？

//Radio buttons
<input type="radio" id="dateoption" name="dateoption" value="1">
<input type="radio" id="dateoption" name="dateoption" value="2">

//Add new form elements
<span id="datesettings"></span>

我目前正在阅读一本Javascript书，但它并没有帮助我理解。 如果有人可以帮助我这个例子，那么便士可能会下降。 谢谢你的时间。

Answer 1

看看这个页面：

它解释了这个过程，因此您可以理解为什么以某种方式执行它，并且它提供了良好的示例代码。

http://www.webdevelopersnotes.com/tips/html/finding_the_value_of_a_radio_button.php3

Answer 2

您可以编写一个函数来进行检查，如下所示：

function CheckDateOptions() {
    var o1 = document.getElementById("dateoption1");
    var o2 = document.getElementById("dateoption2");
    var eSettings = document.getElementById("datesettings");
    if(o1.checked) {
        eSettings.appendChild(...);
    }
    else if(o2.checked) {
        eSettings.appendChild(...);
    }
}

但是，您必须确保为单选按钮分配唯一的 id值。 您可以复制name以对单选按钮进行分组，但对于任何元素， id应该是唯一的。

<form id="TestForm">
    <!-- //Radio buttons -->
    <input type="radio" id="dateoption1" name="dateoption" value="1">Text 1</input>
    <input type="radio" id="dateoption2" name="dateoption" value="2">Text 2</text>
    <!-- //Add new form elements -->
    <span id="datesettings"></span>
</form>