創建單選按鈕需要幫助的動態

Question

我有一個問題，在設定的動態創建的單選按鈕標籤和定位，我想要從一個文本框中輸入值，並使用該值作爲標籤所生成的新的單選按鈕，我試圖此代碼它所產生的單選按鈕，但它不給它的標籤（一個從文本框檢索）還它產生無線電按鈕水平不是垂直：
HTML：

<input type="text" name="option" id="option" value="" /><br> 
<div id="AddButton" data-role="button" data-inline="true">Add</div> 

<div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"> 
    <legend>Choose an Option:</legend><br><br> 
    <div id="after"> 

    </div> 
    </fieldset> 
</div> 

JavaScript的：

<script> 
    function createRadioElement(elem, label, checked) { 
    var input = document.createElement('input'); 
    input.type = 'radio'; 
    input.label = value; 

    if (checked) { 
     input.checked = 'checked'; 
    } 
    elem.parentNode.insertBefore(input,elem.nextSibling) 
    }  

    $('#admin').live('pageinit',function(event){ 
    $('#AddButton').click(function(){ 
     var x = document.getElementById('option').value 

     createRadioElement(this,$('#option').val()); 
    }); 
    }); 
</script> 

Answer 1

你可以做點像

$('#AddButton').click(function(){ 
    var label = document.getElementById('option').value; 
    $radio = $('<input />', { type: "radio" }); 
    var $label = $('<label />', { text: label}); 
    var wrapper = $('<div />'); 
    wrapper.append($label).append($radio);; 

    $('div#after').append(wrapper); 

}); 

這裏http://jsfiddle.net/h8g6S/

Answer 2

由於您使用的是jQuery，因此您可以利用.clone()方法來複制現有的標記塊。我所做的是在表單外「隱藏」模板部分，然後根據需要複製我需要的內容並更改屬性（如「名稱」，「標識」等）。

這裏的API參考：http://api.jquery.com/clone/

編輯：下面是一個例子...

<div id="radiobtn_tmpl"> 
    <input type="radio" class="rdio btn" /> 
    <label class="rdio lbl" for=""></label> 
</div> 

... 

stuff here... 

... 

<script> 
    var _template = $('#radiobtn_tmpl').clone(); 

    _template.removeAttr('id'); 
    _template.find('.rdio.btn').attr({ 'name' : "teh_button", 'id' : "teh_button" }); 
    _template.find('.rdio.lbl').attr({ 'for' : "teh_button" }).html('Your label text'); 

    $(_template).appendTo($('#after')); 
</script> 

Answer 3

這應該讓你開始：

function createRadioElement(elem, label, checked) { 
    var id = 'option1_' + label; 
    $('#after').append($('<input />', { 
     'type': 'radio', 
     'name': 'option1', 
     'id': id, 
     'value': '1' 
    })); 
    $('#after').append('<label for="' + id + '">' 
         + label + '</label><br />'); 
} 

$('#AddButton').click(function(){ 
    var x = document.getElementById('option').value; 
    createRadioElement(this,$('#option').val()); 
}); 

見演示：http://jsfiddle.net/HaBhk/2/

Answer 4

撥弄我看到了很多這裏如何動態地添加使用jQuery單選按鈕的答案，但不是很多，說明如何使用jQuery移動，以提高動態單選按鈕。

訣竅是調用新創建的單選按鈕.checkboxradio()。

如果編程更改後的值，你會再調用.checkboxradio('refresh')

演示在這裏：http://jsfiddle.net/kiliman/4wDU7/7/

$(document).bind('pageinit', function(e, data) { 
    var $container = $('#optionsgroup').find('.ui-controlgroup-controls'); 

    // build radio button list 
    for (var i = 0; i < 3; i++) { 
     var id = 'option_' + i, 
      label = 'Option ' + i; 

     $('<input />', { 
      'id': id, 
      'type': 'radio', 
      'name': 'options', 
      'value': i 
     }) 
     .append('<label for="' + id + '">' + label + '</label>') 
     .appendTo($container); 
    } 
    // enhance radio buttons 
    $container.find('input[type=radio]').checkboxradio(); 
});