JQuery - 创建新的单选按钮

Question

好的，这就是我到目前为止所得到的......感谢 Paolo。
它工作正常，但前提是我有现有的单选按钮选项。

如果我需要创建一个新的单选按钮而不需要任何预先存在的单选按钮怎么办？

最终我想做的是创建一个选项数组，循环它们并输出 作为单选按钮的选项列表。所以最初，“abc”div 中不会有单选按钮。

提前致谢!

<script>
$(document).ready(function() {
  // add a new input when a new color is chosen, for example
  $('#aaa').change(function() {
      var radio = $('<input>').attr({
          type: 'radio', name: 'colorinput', value: '2', id: 'test'
      });
      $(':radio:last-child', '#abc').after(radio).after('option 3 ');
  });
});

</script>

<form id='abcdef'>
  <select id="aaa">
    <option>red</option>
    <option>blue</option>
    <option>other</option>
  </select>

  <div id="abc">
    Input<BR>
    option 1 <input type="radio" name="colorinput" value="1" /> 
    option 2 <input type="radio" name="colorinput" value="2" /> 
  </div>
  <BR>
</form>

Answer 1

好的，考虑到您更新的问题，这应该可以做到(或者非常接近):

  $(function() {
    $("#aaa").change(function() {
      $('<input type="radio" name="colorInput" id="test" value="2">')
        .appendTo($("#abc")).before('Option 3');
    });
  });

注意事项:

• 您可以直接在 jQuery 构造函数中构造 HTML；
• 我假设您将使用动态 ID、值和标签。这只是在表达式中连接字符串和变量的问题；
• 您可能需要检查重复项(上面未涵盖)；
• 如果您像您看起来那样将它们放在 div 中，则采用上述方法而不是我最初建议的方法(即 $(":radio:last"))，因为它更快、更清晰，并且不依赖于它们已经是一个单选按钮了；和
• 除非您使用 jQuery 1.3 live() 事件处理程序，否则新建的 HTML 元素不会有任何相关的事件处理程序。