如何用jQuery动态创建一个单选按钮

How to create a radio button dynamically with jQuery?

本文关键字：一个 单选按钮 何用 jQuery 动态 创建      更新时间：2023-09-26

我正在开发一个小应用程序，我想在一行中创建20个单选按钮。

我如何使用jQuery做到这一点?

我想这会达到你的目的。

for (i = 0; i < 20; i++) {
    var radioBtn = $('<input type="radio" name="rbtnCount" />');
    radioBtn.appendTo('#target');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

可以在for循环中使用appendTo():

for (i = 0; i < 20; i++) {
    $('<input type="radio" name="dynradio" />').appendTo('.your_container');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="your_container"></div>

下面的内容:

for (i = 0; i < 20; i++) {
    $('#element').append('<input type="radio" name="radio_name" />');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

for (i = 0; i < 20; i++) {
    $('<input type="radio" name="radiobtn" >Yourtext'+i+'</input>').appendTo('#container');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

此代码将为每个单选按钮添加具有唯一id的单选按钮....

for (var i=0;i<=20;i++)
{
 $("#yourcontainer").append("<input type='radio' id='myRadio"+i+"'>")
}

您必须找到应该包含您的单选按钮和append()的元素:

var container = $('#radio_container');
for (var i = 0; i < 20; i++) {
    container.append('<input type="radio" name="radio_group" value="' + i + '">');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radio_container">Choose one: </div>

因此，您只需搜索一次容器(与其他答案不同)，并为每个单选项分配一个值，以便您识别选择。

假设您有一个ID=myDivContainer的div试试这个:

for (i=0;i<=20;i++)
{
$("#myDivContainer").append('<input type="radio" />')
}

for (var i=0;i<=20;i++)
  {
  $("#yourcontainer").append("<input type='radio' name='myRadio' />");
  }
相关文章：