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

时间:2010-09-17 19:27:05

标签: javascript dom

如何在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书,但它并没有帮助我理解。如果有人可以帮助我这个例子,那么便士可能会下降。谢谢你的时间。

2 个答案:

答案 0 :(得分:3)

查看此页面:

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

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

答案 1 :(得分:1)

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

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>