radio button doesn't get selected properly

Question

We use the following code to select a choice value from a radio button group. Sometimes the radio button doesn't get selected properly, if you click in between the radio button control and the choice in a horizontal layout (this behaviour is consistently reproducible). How do I ensure that the value gets selected if I click anywhere on that row.

                <h:selectOneRadio value="#{_user.choice}">
                    <f:selectItems value="#{_user.choices}" />
                </h:selectOneRadio>

Answer 1

If you want to use an entire DIV to toggle a radio, you need to use some JS. If you just want to make the radio selectable via the text next to it and the area between the radio and the text label, use this:

<p><label><input type="radio">Click me.</label></p>

You do not need quotes around the type, but it's a good idea to use them, anyway. I prefer to use the 'p' tags around my inputs so that I can better automate error correction. It isn't necessary, and you'll hear a lot of people say, "That p tag isn't necessary."

You will also want to open and close with the 'fieldset' tag and perhaps a 'legend' tag. You can see specifications at w3c 4.10, on HTML5 forms.

You may also want to use the 'value' tag. For example:

<form method="post">
  enctype="application/x-www-form-urlencoded"
  action="https://coke.example.com/order.cgi"&gt;
  <p><label>Order number: <input name="orderID"></label></p>
  <fieldset>
    <legend>Drink</legend>
    <p><label><input type="radio" value="coke">Do you want a Coke?</label></p>
    <p><label><input type="radio" value="pepsi">Or do you want a Pepsi?</label></p>
    </legend>
  </fieldset>
</form>

With the code I have submitted, I was unable to reproduce your problem, sir.

Answer 2

The <h:selectOneRadio> doesn't render the radio button inside the label and the radio button itself has some default margin in most if not all browsers. Clicking on this margin indeed won't select the radio button. You'd like to set this margin to zero with little help of CSS and if necessary replace it by a padding. E.g.

<h:selectOneRadion styleClass="radiobuttons">

with

.radiobuttons input { 
    margin: 0;
}