Как динамически создавать переключатели?

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 click вы передаете переменную checked, которая не существует.
• Вы не можетеНе передавайте элемент, возвращенный из createRadioElement, чему-либо, что будет вставлять его в DOM

Я исправил их, в основном изменив вашу #AddButton функцию щелчка следующим образом:

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

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

Вы, вероятно, захотите изменить это, чтобы оно добавляло переключатель в конец любого элемента #RadioArea вместо полной замены содержимого.

См. Демонстрацию