设置选中的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>