2

JSF 2.0，Primefaces 3.1.1

我有两个 p:selectOneRadio 组件：

   <p:selectOneRadio id="radio1" value="#{inningBean.lastDeliveryType}">  
        <f:selectItem itemLabel="Wide" itemValue="1" />
        <f:selectItem itemLabel="No Ball" itemValue="2" />
        <f:selectItem itemLabel="Normal" itemValue="3" />
   </p:selectOneRadio> 

   <p:selectOneRadio id="radio2" value="#{inningBean.lastDeliveryRunsScored}">  
        <f:selectItem itemLabel="1" itemValue="1" />
        <f:selectItem itemLabel="2" itemValue="2" />
        <f:selectItem itemLabel="3" itemValue="3" />
   </p:selectOneRadio>

   <p:commandButton />

我希望当用户单击按钮时，选择每个 selectOneRadio 中的第一个单选按钮（不向服务器提交请求）。就像用户自己在每个 p:selectOneRadio 中选择第一个单选按钮一样，我只想用 javascript 来做。

4

1 回答 1

3

您可以使用 jQuery 轻松完成此操作。看看这些选择器：

在prop()函数上。

现在说重点：

为了更好地操作元素，请在您的wrapping上ids使用。prependId="false"formp:selectOneRadio

您不想重新加载页面，因此ajax="true"在p:commandButton.

<p:commandButton value="select" ajax="true" onclick="selectRadios()" update="@form"/>

如果您id为p:selectOneRadioprimefaces 指定，则将其用作呈现的 HTML 页面的name属性。input type="radio"当然，如果你不在元素上使用prependId="false"，formprimefaces 会添加forms id到无线电name属性中，所以看起来像name="formId:radio1". 有了prependId="false"它name="radio1"。

现在，当您知道您的单选按钮具有特定性时，name您可以使用简单的功能选择由此指定的每个组中的第一个：name

function selectRadios(){
               jQuery('input[name=radio1]:first').prop('checked', true);
               jQuery('input[name=radio2]:first').prop('checked', true);
            };

所以整个代码看起来像这样：

<script type="text/javascript">
            function selectRadios(){
               jQuery('input[name=radio1]:first').prop('checked', true);
               jQuery('input[name=radio2]:first').prop('checked', true);
            };
</script>

<h:form id="formID" prependId="false">  
            <p:selectOneRadio id="radio1" value="#{testBean.radio1}">  
                <f:selectItem itemLabel="Wide" itemValue="1" />
                <f:selectItem itemLabel="No Ball" itemValue="2" />
                <f:selectItem itemLabel="Normal" itemValue="3" />
            </p:selectOneRadio> 

            <p:selectOneRadio  id="radio2" value="#{testBean.radio2}">  
                <f:selectItem itemLabel="1" itemValue="1" />
                <f:selectItem itemLabel="2" itemValue="2" />
                <f:selectItem itemLabel="3" itemValue="3" />
            </p:selectOneRadio>
            <p:commandButton value="select" ajax="true" onclick="selectRadios()" update="@form"/>
</h:form>

注意p:selectOneRadio：如果您不想通过以下方式更新整体，也可以单独更新每个form：update="radio1 radio2"

编辑

我不知道如何radio button在 primefaces 中选择 a （使用主题时）而不request制作 a ，因为单击radio button GET request后将获得相关的UI 图标（至少在第一次单击时）。如果您对此感到满意，请继续阅读。

由于您不想制作经典HTTP request，也不想AJAX request更改您的类型commandButton：

<p:commandButton type="button" value="Default select" id="selButtonId" onclick="selectRadios();" />

并使用此js功能触发点击radio button：

function selectRadios(){
               jQuery('[for=radio1\\:0]').click();
               jQuery('[for=radio2\\:0]').click();
            };

IDofradio button将用作label+ :x，其中x是button. （0 是第一个）。这是使用click()功能的正确方法，因为您想单击label按钮本身，而不是单击此处。

注意： Primefaces 3.1.1 版与不支持元素刷新方法的jQuery 1.6.x 版捆绑在一起（从 1.8 版开始支持）。button否则你可以使用：

  function selectRadios(){
       jQuery('input[name=radio1]:first').prop('checked', true).button("refresh");
       jQuery('input[name=radio2]:first').prop('checked', true).button("refresh");
    };

所以恕我直言，上面写的就是你在你的情况下所能做的。我不知道是否有其他button refresh方法可以替代。如果我错了，肯定会有人纠正我。

问候

于 2012-05-12T22:57:24.473 回答