用标签替换单选按钮？

Question

我一直点击未经检查的单选按钮标签＆＃34; Habit＆＃34;，但它不会被检查。为什么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>