为选中的 p:selectOneRadio 项目设置样式

Question

我正在使用 PrimeFaces 7。

<p:selectOneRadio id="time" value="AM" columns="2"
                  unselectable="true" rendered="true" styleClass="label"
                  layout="lineDirection" enabledClass="radio-active">
    <f:selectItem itemLabel="AM" itemValue="AM" />
    <f:selectItem itemLabel="PM" itemValue="PM"/>
</p:selectOneRadio>

我需要设置 td 样式，单选按钮位于其检查事件中。

Answer 1

您可以使用 jQuery 将 CSS class 添加到 td 元素：

    <script>
            function changeSelection(){
                jQuery("#time td").removeClass('checked-td'); // remove the 'checked-td' from both td elements
                jQuery("#time input:checked").parents('td').last().addClass('checked-td'); // adding 'checked-td' class
            }
    </script>

changeSelection 选择更改时需要执行JS函数：

    <p:selectOneRadio id="time" value="AM" columns="2"
                      unselectable="true" rendered="true" styleClass="label"
                      onchange="changeSelection();"
                      layout="lineDirection" enabledClass="radio-active">
        <f:selectItem itemLabel="AM" itemValue="AM" />
        <f:selectItem itemLabel="PM" itemValue="PM"/>

    </p:selectOneRadio>

然后您将能够为 checked-td class 指定样式。例如：

    <style>
        .checked-td {
            background: brown;
        }
    </style>

为选中的 p:selectOneRadio 项目设置样式

Style the td of a checked p:selectOneRadio item

css

jquery

jsf

primefaces