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

Posted 2023-05-09

【中文标题】在动态创建单选按钮方面需要帮助

【英文标题】：Need help in creating radio buttons dynamically

【发布时间】：2012-03-23 18:07:29

【问题描述】：

我在设置动态创建的单选按钮的标签和对齐方式时遇到问题，我想从文本框中检索一个值并将该值用作新生成的单选按钮的标签，我尝试了它生成单选按钮的这段代码按钮，但它没有给它一个标签（从文本框中检索到的那个），它也水平而不是垂直地生成单选按钮： 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>

【问题讨论】：

this [question (How do you dynamic create a radio button in Javascript...)][1] 我认为 [1] 可以帮助你：***.com/questions/118693/…

我已经知道如何动态创建单选按钮，但我不知道如何设置它们的标签和对齐方式

【参考方案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/

【讨论】：

但是所有生成的单选按钮都可以同时选择:)

@Eslam 单选按钮在 HTML 中是根据 name 属性分组的，因此请确保它们都共享一个名称。不过，id 仍然必须是唯一的。

@Eslam 建议你应该给他们相同的名字，这是一个更新的小提琴jsfiddle.net/h8g6S/1

我可以生成 jQuery 移动原生收音机而不是标准 HTML 单选按钮

【参考方案2】：

由于您使用的是 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>

【讨论】：

.clone方法和我的问题有什么关系，我没看懂！

关系是：使用库中的内容，而不是重新发明***。如果您需要，我会添加一个示例。

可能值得一提的是，jQuery 代码位于函数或绑定事件处理程序内部，而不是像上面代码所暗示的那样位于全局范围内。这并不意味着 100% 保持原样，只是一个开始。

【参考方案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/

【讨论】：

很好，但是如何使它们垂直对齐而不是水平对齐

$('#after').append('<br />');

进行了更新。现在它是垂直对齐的，并且只选择了一个按钮。使用正确的标签会更好，因此您还可以单击标签文本。

我可以生成 jQuery 移动原生单选按钮而不是标准 HTML 单选按钮吗？

无论如何，试着了解你在做什么。更改您拥有的脚本，直到您知道每个小字符的用途、它存在的原因以及如何在其他地方使用它。阅读一些教程并查看一些演示脚本。

【参考方案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();
);