设置选中的 p:selectOneRadio 项的 td 样式

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 类添加到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类指定样式。 例如：

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