Question

我有一个类型为[“ aaa”，“ bbb”，“ ccc”]的数组。

我正在尝试获取各个索引的值，并将它们显示为对话框中的单选按钮。有人可以帮我吗，如何用数组的值填充单选按钮？

谢谢。

Answer 1

这种情况下的工作代码很简单，如下所示：

let myArray = ["aaa", "bbb", "ccc"];
let radioHTML = "";

$.each(myArray, function( index, value ) {
  radioHTML += '<label><input type="radio" name="radio_group" value="' + value + '"> ' + value + '</label><br>';
});

$("#radio-group").html(radioHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="my-form">
  <p>Radio Group</p>
  <div id="radio-group"></div>
</form>

代码的工作方式

您的一条评论提到您对编码还很陌生，所以我将在上面的代码块中解释一些内容。

jQuery $ .each（）

我将不做深入解释，因为这里有一个关于不同循环方法的好答案（但是您将需要筛选一些字符串插值代码）：How to loop through array in jQuery?

HTML单选按钮

格式如下：

<label><input type="radio" name="radio_group" value="value">Visible Value</label><br>

让我们逐步介绍上述非显而易见的元素和属性：

对于同一问题，每个单选按钮上的

name必须相同。这是浏览器将单选按钮关联在一起的方式，并防止用户同时选择多个。此名称也是表单提交期间作为“键”（与“值”在键/值对中）传递的名称，但这是另一个主题。

value是您真正要问的问题。这是您在其中设置后台值的属性，该值将传递给处理表单提交的任何代码。在上面的工作代码段中，我将值和可见值设置为相同的值-请注意，这并不总是所需的功能。

Visible Value只是位于输入元素外侧的字符串。这是因为它实际上是为用户显示您的选项值的文本。根据您的DOM结构和目标，您可能希望将其包装在<p>或<label中。

<label></label>是我用来包装整个input元素以及Visible Value的元素。这使用户可以单击Visible Value文本来选择关联的单选输入。

<br>是HTML换行符。我将其放在此处是因为当您希望将元素阻塞（在单独的行上）时，元素倾向于内联。这将解决该问题。

Answer 2

在stackoverflow上有一个very similar thread。基本上，您需要遍历数组并动态创建每个按钮。

在我链接的线程中，它们使用for循环，但是有更现代的方法可以遍历数组：

JQuery具有$.each utility来在数组上执行循环。
Javscript 5.1+在数组对象上也有一个each method

无论选择哪种循环方法，在JQuery中创建按钮都是相同的。

请注意，如果要提高呈现按钮的性能，请考虑先序列化所有动态按钮，然后使用Jquery的html()方法进行一次DOM操作。

一种干净的方法是使用Javascript的Array map method：

<span id="buttonArea"></span>

<script>
    var options = ["aaa","bbb","ccc"];
    var buttons = options.map((option,index) => {
        return '<input type="radio" id='+ option +
                     ' value='+ index +
                     ' name="button_group"/><label for='+ option +'>'+ option +'</label>';
    });

    $("#buttonArea").html(buttons.join(""));
</script>

这是此代码创建的动态按钮html：

<span id="buttonArea">
   <input type="radio" id="aaa" value="0" name="button_group"><label for="aaa">aaa</label>
   <input type="radio" id="bbb" value="1" name="button_group"><label for="bbb">bbb</label>
   <input type="radio" id="ccc" value="2" name="button_group"><label for="ccc">ccc</label>
</span>

这是我放在W3CSchool上的working example。

注意：

JQuery的html（）比append（）快，请参见benchmark in this thread
join() method从map方法返回的输出数组中删除逗号。
使用模板文字反引号`使代码更易于阅读，但是IE中不支持该代码（并且Edge不支持转义模板文字）

Answer 3

您可以使用reduce javascript函数来创建内部html，如下所示：

var innerHtml = array.reduce((groupHtml, currentValue) => groupHtml += `<input type="radio" name="radio_group" value="${currentValue}"/> ${currentValue}<br>`, '');

然后您可以将内部html添加到所需的容器中，如下所示：

$('container').append(innerHtml);

容器应该是有效的选择器，例如：$（'form'），$（“＃my-form”）等...

从jQuery数组中填充单选按钮

3 个答案:

代码的工作方式