如何动态创建单选按钮？

Question

我在动态创建单选按钮时遇到问题，我有一个文本框和一个按钮，我要求用户在文本字段中输入一个值，然后我检索文本框值，并在他按A时使用它来创建单选按钮按钮，我在javaScript中尝试了此代码，但在单击指定按钮时并没有创建单选按钮：

<script type="text/javascript" >
    function createRadioElement(value, checked) {
        var radioHtml = '<input type="radio" value="' + value + '"';
        if ( checked ) {
            radioHtml += ' checked="checked"';
        }
        radioHtml += '/>';

        var radioFragment = document.createElement('div');
        radioFragment.innerHTML = radioHtml;

        return radioFragment.firstChild;
    }

    $( '#admin' ).live( 'pageinit',function(event){

        $( "#AddButton" ).bind( "click", function(event, ui) {

            var x=document.getElementById('option').value

            createRadioElement(x, checked);
        });
    });
</script> 

`

Answer 1

尝试以下操作创建无线电输入：

function createRadioElement(elem, value, checked) {
    var input = document.createElement('input');
        input.type = 'radio';
        input.value = value;
        if (checked) {
            input.checked = 'checked';
        }

    elem.parentNode.insertBefore(input, elem.nextSibling);
}

JS小提琴演示 。

---

参考文献：

• createElement() 。
• insertBefore() 。
• parentNode 。

Answer 2

我可以看到的是以下问题：

• 在您的#AddButton单击函数中，您传递了一个已checked不存在的变量。
• 您不会将createRadioElement返回的元素createRadioElement给将其插入DOM的任何元素

我通过将#AddButton click函数基本上更改为以下内容来修复了这些问题：

$("#AddButton").bind("click", function(event) {
    var x = document.getElementById('option').value,
        $ra = $('#RadioArea');

    $ra.html(createRadioElement(x, true));
});​

您可能需要更改此设置，以便将单选按钮附加到#RadioArea元素的末尾，而不是完全替换内容。

观看演示