用标签替换单选按钮？

Question

我一直点击未选中的单选按钮标签“习惯”，但它不会被选中。为什么 HTML 版本可以工作？

<% Challenge::CATEGORY.each do |c| %>
  <%= f.radio_button(:category, c, :class => "date-format-switcher", checked: (c=='goal')) %>
  <%= label(c, c) %>
<% end %>

HTML 输出

<input class="date-format-switcher" type="radio" value="goal" checked="checked" name="challenge[category]" id="challenge_category_goal">
<label for="goal_goal">Goal</label>

<input class="date-format-switcher" type="radio" value="habit" name="challenge[category]" id="challenge_category_habit">
<label for="habit_habit">Habit</label>

css

  input[type="radio"] {
      display: none;
  }
  input[type="radio"]:checked + label {
      border: 1px solid red;
  }

challenge.rb

CATEGORY = ['goal', 'habit']

我关注了这个JSfiddle example。

更新

使用@Wowsk 答案作为指导，我尝试通过将:category 与<%= label(c, c) %> 合并，使ruby 输出适当的html。它没有与<%= label(category: c, c) %>、<%= label(:category(c, c)) %> 或<%= label(category: c, category: c) %> 等尝试一起工作

Answer 1

问题是您使用了错误的for 属性。

for 属性是您希望它作为 id 的元素。

将 for 值更改为前一个输入的 id，它应该像一个魅力一样工作。

input[type="radio"] {
      display: none;
  }
  input[type="radio"]:checked + label {
      border: 1px solid red;
  }

<input class="date-format-switcher" type="radio" value="goal" checked="checked" name="challenge[category]" id="challenge_category_goal">
<label for="challenge_category_goal">Goal</label>

<input class="date-format-switcher" type="radio" value="habit" name="challenge[category]" id="challenge_category_habit">
<label for="challenge_category_habit">Habit</label>