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();
});

需要帮助动态创建单选按钮

4 个答案: