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元素将不会有任何相关的事件处理程序.