javascript - 用标签替换单选按钮？

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;
  }

挑战.rb

CATEGORY = ['goal', 'habit']

我关注了这个JSfiddle example .

更新

以@Wowsk 的回答为指导，我尝试通过合并 :category 使 ruby​​ 输出适当的 html与 <%= label(c, c) %> .它不适用于 <%= 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>