未正确选择单选按钮答案

【问题标题】：radio button doesn't get selected properly未正确选择单选按钮
【发布时间】：2010-09-14 05:52:58
【问题描述】：

我们使用以下代码从单选按钮组中选择一个选项值。如果您在单选按钮控件和水平布局中的选择之间单击，有时单选按钮没有被正确选择（这种行为始终可以重现）。如果单击该行的任意位置，如何确保选择该值。

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

【问题讨论】：

渲染出来的 HTML 是什么样子的？

标签： jquery html jsf

【解决方案1】：

如果要使用整个 DIV 来切换收音机，则需要使用一些 JS。如果您只想通过旁边的文本以及收音机和文本标签之间的区域来选择收音机，请使用：

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

您不需要在类型周围加上引号，但无论如何，使用它们是个好主意。我更喜欢在我的输入周围使用“p”标签，以便更好地自动纠错。没必要，你会听到很多人说，“那个 p 标签是没有必要的。”

您还需要使用“fieldset”标签以及可能的“legend”标签来打开和关闭。您可以在 HTML5 表单上查看 w3c 4.10 中的规范。

您可能还想使用“价值”标签。例如：

<form method="post">
  enctype="application/x-www-form-urlencoded"
  action="https://coke.example.com/order.cgi">
  <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>

使用我提交的代码，我无法重现您的问题，先生。

【讨论】：

【解决方案2】：

<h:selectOneRadio> 不会在标签内呈现单选按钮，单选按钮本身在大多数（如果不是所有）浏览器中都有一些默认边距。单击此边距确实不会选择单选按钮。您想在 CSS 的帮助下将此边距设置为零，并在必要时用填充替换它。例如

<h:selectOneRadion styleClass="radiobuttons">

与

.radiobuttons input { 
    margin: 0;
}

【讨论】：