Have radio button's label make selection too?

According to (somewhat official) this guide, I can make a radio button's label make the selection for that radio button too. They say,

Always use labels for each checkbox and radio button. They associate text with a sp开发者_如何转开发ecific option and provide a larger clickable region.

Unfortunately, I have not been able to get this functionality for my form. Here is my code:

<% 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 %>

I've also tried this (because this is the example's way using FormTagHelper instead of 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 %>

But, I still cannot get it to work. I'm using rails 2.3.5 and ruby 1.8.7.

Thanks for reading, and maybe helping!

---

You may found a solution but it can help others. I'm using Rails 4+.

You can make the label clickable properly using Rails' FormHelper's label method using the "value" key into params.

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

For your code, it should be something like

<%= 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" %>

Hope it helps :)

---

An easy way to do this for radio buttons is to place the input tag inside the label, like so:

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

This is a valid way of accomplishing your goal.

In Rails the label helper can accept a block, so you could do:

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

---

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

---

Not knowing rails at all, the HTML requirements are easy: You must construct your tags like this:

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

So, first of all, check your HTML, in your example, you had missing quotes in ...name="bet_type type="radio"...

Secondly, the for="" always points at the id of the field.

Now you got a clickable label for the field bet_type!

Hope it helps!

---

Woops! Sorry all. I found the error in a bit of a disingenuous way.

I wrote the code of this post by hand...no copy-paste. To keep things clear, I renamed some of values I used because the code I was running was a bit messy (AND apparently incorrect).

So, when Gaby asked me to get some output for these code chunks, I stuck them in my view and voila! Labels that select their respective radio buttons! But why?!

Well, here's the thing. Looking at the ouput, I realized that my original code had not been generating consistent input.id and label.for values in the html. It looked something like this:

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

This generated:

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

See how input.id and label.for are different?

And only when I ran the code in my question did I get this right.

It seems to work like this: the radio button tag method makes input.id from it's (object_name + "_" + value) and the label tag method makes label.for from it's object_name. And when those two equal, you get a selecting label.

I hope this discovery can help someone else out along the line.

Sorry to get your gears grinding for nothing too!

---

I am using Rails 5 and nested attributes so it wasn't possible to hard code the DOM id of the input field (radio button). The solution is to use the value: attribute of form.label

<%= 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 automatically generates the for: attribute for the label. Just inspect the label and ensure that the for: attribute of your label matches the id of the radio button.