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

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用于选择关联 radio 输入的文本。

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