时间戳

首页 > 解决方案 > 从jQuery中的数组填充单选按钮

jquery - 从jQuery中的数组填充单选按钮

问题描述

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

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

谢谢。

标签： jquery

解决方案

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

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 结构和目标，您可能希望将其包装在 a<p>或<label.

<label></label>是我用来包装整个input元素的元素，以及Visible Value. 这允许用户点击Visible Value文本来选择相关的单选输入。

<br>是一个 HTML 换行符。我把它放在这里是因为当您希望元素被阻止时（在单独的行上），元素倾向于内联。这将解决这个问题。

推荐阅读