单选按钮的标签也进行选择吗？

Question

根据（有点官方）this guide，我也可以制作单选按钮的标签来选择该单选按钮。他们说，

始终为每个复选框和单选按钮使用标签。它们将文本与特定选项相关联并提供更大的可点击区域。

很遗憾，我的表单无法使用此功能。这是我的代码：

<% form_for(@bet) do |f| %>
  <%= f.label :bet_type %>
  <%= f.radio_button :bet_type, "moneyline" %>
  <%= f.label :bet_type_moneyline, "Moneyline" %>
  <%= f.radio_button :bet_type, "spread" %>
  <%= f.label :bet_type_spread, "Spread" %>
<% end %>

我也试过这个（因为这是示例使用 FormTagHelper 而不是 FormHelper 的方式）：

<% form_for(@bet) do |f| %>
  <%= radio_button_tag :bet_type, "moneyline" %>
  <%= label_tag :bet_type_moneyline, "Moneyline" %>
  <%= radio_button_tag :bet_type, "spread" %>
  <%= label_tag :bet_type_spread, "Spread" %>
<% end %>

但是，我仍然无法让它工作。我正在使用 rails 2.3.5 和 ruby​​ 1.8.7。

感谢您的阅读，也许可以提供帮助！

Answer 1

我正在使用 Rails 5 和嵌套属性，因此无法对输入字段（单选按钮）的 DOM id 进行硬编码。解决办法是使用form.label的value:属性

<%= form.radio_button :question_option_id, ques_opt.id %>&nbsp;<%= form.label :question_option_id, ques_opt.option_text.humanize, value: ques_opt.id %>

Rails 自动为标签生成 for: 属性。只需检查标签并确保标签的 for: 属性与单选按钮的 id 匹配。

Answer 2

您可能找到了解决方案，但它可以帮助其他人。我正在使用 Rails 4+。

您可以使用Rails' FormHelper's label method 在参数中使用“value”键使标签可正确点击。

label(:post, :privacy, "Public Post", value: "public")
# => <label for="post_privacy_public">Public Post</label>

对于您的代码，它应该类似于

<%= f.radio_button :bet_type, "moneyline" %>
<%= f.label :bet_type, "Moneyline", value: "moneyline" %>
<%= f.radio_button :bet_type, "spread" %>
<%= f.label :bet_type, "Spread", value: "spread" %>

希望对你有帮助:)

Answer 3

<%= f.radio_button :bet_type, "moneyline" %>
<%= f.label :moneyline, "Moneyline", :for => "bet_type_moneyline" %>

Answer 4

为单选按钮执行此操作的一种简单方法是将输入标签放在标签内，如下所示：

<label>
  <input />
  This is an input!
</label>

这是实现目标的有效方式。

在 Rails 中，label 助手可以接受一个块，所以你可以这样做：

<%= f.label :moneyline do %>
  <%= f.radio_button :bet_type, "moneyline" %>
  "Moneyline"
<% end %>

Answer 5

根本不知道rails，HTML要求很简单：你必须像这样构造你的标签：

<input id="bet_type_moneyline" name="bet_type" type="radio" value="moneyline">
<label for="bet_type_moneyline">Moneyline</label>

所以，首先，检查您的 HTML，在您的示例中，您在 ...name="bet_type type="radio"... 中缺少引号...

其次，for="" 总是指向字段的 id。

现在您获得了字段 bet_type 的可点击标签！

希望对你有帮助！

Answer 6

哎呀！对不起大家。我以一种不诚实的方式发现了错误。

我手工编写了这篇文章的代码...没有复制粘贴。为了清楚起见，我重命名了一些我使用的值，因为我运行的代码有点混乱（而且显然不正确）。

所以，当 Gaby 要求我为这些代码块获取一些输出时，我将它们放在我的视图中，瞧！选择各自单选按钮的标签！但是为什么呢？！

嗯，事情就是这样。查看输出，我意识到我的原始代码没有在 html 中生成一致的 input.id 和 label.for 值。它看起来像这样：

<%= f.radio_button :bet_type, "moneyline" %>
<%= f.label :moneyline, "Moneyline" %>

这产生了：

 <input id="bet_type_moneyline" name="bet_type type="radio" value="moneyline" />
 <label for="moneyline">Moneyline</label>

看看 input.id 和 label.for 有何不同？

只有当我运行我的问题中的代码时，我才正确。

它似乎是这样工作的：单选按钮标记方法从它的 (object_name + "_" + value) 生成 input.id，而标签标记方法从它的 object_name 生成 label.for。 当这两个相等时，您会得到一个选择标签。

我希望这个发现可以帮助其他人。

很抱歉让你的齿轮也白费了！