Javascript 如何使用 jQuery 动态创建单选按钮?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5550785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 17:45:20  来源:igfitidea点击:

How to create a radio button dynamically with jQuery?

javascriptjquery

提问by hardik9045

I am developing a small application in which I want to create 20 radio buttons in one row.

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

How can I do this using jQuery?

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

回答by Deviprasad Das

I think this will serve your purpose:

我认为这将有助于您的目的:

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>

回答by fabrik

You can do it with appendTo(), within a for loop:

您可以在 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>

回答by kieran

Something along the lines of:

类似的东西:

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>

回答by kiran kumar

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>

回答by Sangeet Menon

This code will append radio buttons with unique id to each of them....

此代码将向每个按钮附加具有唯一 ID 的单选按钮....

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

回答by Palec

You have to find the element that should contain your radio buttons and append()them:

你必须找到应该包含你的单选按钮和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>

Thus you search for the container only once (unlike in the other answers) and assign a value to each radio that lets you identify the choice.

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

回答by Jobelle

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

回答by Mohammed Swillam

Assuming that you have a div with the ID=myDivContainer try this:

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

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