Question

我在动态创建单选按钮时遇到问题，我有一个文本框和一个按钮，我要求用户在文本字段中输入一个值然后我检索文本框值并使用它来创建一个单选按钮他按下一个按钮，我在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 Fiddle demo

<小时/> 的参考文献：

createElement()。

insertBefore()。

parentNode。

Answer 2

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

在#AddButton点击功能中，您传递了一个不存在的变量checked。
您不会将从createRadioElement返回的元素传递给将其插入DOM的任何内容

我通过基本上将您的#AddButton点击功能更改为以下内容来解决这些问题：

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

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

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

如何动态创建单选按钮？

2 个答案:

See demo