是否可以在单选按钮之前和之后使用带有文本的h：selectOneRadio？ [重复]

Question

这个问题在这里已有答案：

• <h:selectOneRadio> renders table element, how to avoid this? 2回答

我希望制作HTML单选按钮，它们后面有标签，并且前面还有数字。使用标准HTML输入标签和CSS可以做到这一点吗？如果不是太复杂，Javascript也可以接受，比如Jquery。使用JSF h：selectOneRadio标记创建元素列表，并且我希望仍然继续使用此标记，如果可能的话，不分割成单独的h：selectOneRadio元素。

JSF看起来像这样：

<h:selectOneRadio id="#{id}" label="#{label}"  value="#{customValue}" 
  immediate="#{immediate}" requiredMessage="#{requiredMessage}"
                >
                <f:selectItems var="item"
                    value="#{classifier[empty classifier ? property : classifier]}"
                    itemLabel="#{empty itemLabel?item.meaning:itemLabel}"
                    itemValue="#{item}" />
                <ui:insert />
            </h:selectOneRadio>

生成的html看起来像这样：

<tbody>
<tr>
    <td>
        <input id="0" type="radio" name="mcData" value="1200" >
            <label for="0"> option1</label>
    </td>
</tr>
<tr>
    <td>
        <input id="1" type="radio" name="mcData" value="1199">
        <label for="1"> option2</label>
    </td>
</tr>
</tbody>

我试过像这样的CSS

 .radio::before {
        content: "1";
    }

但它只在每个复选框之前添加常数。

输出应该是这样的

1. ○选项1
2. ⦿选项2
3. ○选项3

Answer 1

最简单的方法是使用标准HTML <ol> tag获取如下的有序列表：

<ol>
  <li>
    <input type="radio" name="myRadio" id="radio1">
    <label for="radio1">Option 1</label>
  </li>
  <li>
    <input type="radio" name="myRadio" id="radio2">
    <label for="radio2">Option 2</label>
  </li>
  <li>
    <input type="radio" name="myRadio" id="radio3">
    <label for="radio3">Option 3</label>
  </li>
</ol>

Answer 2

当然，只需在<input>标签之前添加任何带有文字的标签

<form>
  <p>1. <input type="radio"> option1</p>
  <p>2. <input type="radio"> option2</p>
  <p>3. <input type="radio"> option3</p>
</form>

Answer 3

是。

尝试使用以下HTML，

<ol id="chk-bx">
    <li><input type="radio">Value1</li>
    <li><input type="radio">Value2</li>
    <li><input type="radio">Value3</li>
</ol>

然后为li元素添加CSS，如下所示

#chk-bx li{
    list-style-type: circle;
}