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

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

由於您使用的是jQuery，因此可以利用.clone()方法復制現有的標記塊。 我所做的是“隱藏”表單之外的模板部分，然后根據需要復制我需要的內容並更改屬性（例如“name”，“id”等）。

以下是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 2

這應該讓你開始：

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 3

你可以做點什么

$('#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 4

我在這里看到了很多關於如何使用jQuery動態添加單選按鈕的答案，但沒有多少說明如何使用jQuery Mobile增強動態單選按鈕。

訣竅是在新創建的單選按鈕上調用.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();
});