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

【问题标题】：Style the td of a checked p:selectOneRadio item为选中的 p:selectOneRadio 项目设置样式
【发布时间】：2019-11-26 09:59:46
【问题描述】：

我正在使用 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 的样式，其中单选按钮位于其检查事件中。

【问题讨论】：

你说你想设计它 - 你到底想要什么？是否要更改 TD 的颜色、增大其大小、更改文本颜色？？
嗨 Rohan，我需要的是，当我检查 AM 时，我必须为 TD 设置一些颜色和样式。
一个更符合您需求的组件是primefaces.org/showcase/ui/input/inputSwitch.xhtml

标签： jquery css jsf primefaces

【解决方案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>

【讨论】：

OP 希望根据按钮的选中状态设置单元格样式
对。我已经修改了答案。谢谢。