Question

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中进行。

Answer 1

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

在prop()函数上。

现在到了这一点：

为了更好地使用元素ids进行操作，请在prependId="false"包裹form上使用p:selectOneRadio。

您不想在虚拟页面中使用ajax="true"中的p:commandButton。

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

如果您为id素数指定p:selectOneRadio，则会在呈现的HTML页面中将其用作name的{{1}}属性。当然，如果您不在input type="radio"元素上使用prependId="false"，则主要广告会将form forms添加到广播id attr。，所以它看起来像{ {1}}。使用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" GET后 radio button将会在其中获得相关的 UI图标（至少在第一次点击时）。如果你还好，继续阅读。

由于您不想使经典request或radio button更改request的类型：

HTTP request

并使用此AJAX request功能触发点击commandButton：

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

js的{{1}}将用作radio button + ：x ，其中 x 是实际的订单号

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

。（0是第一个）。这是使用ID功能的正确方法，因为您想点击radio button而不是按钮本身，解释here。

注意： Primefaces ver 3.1.1与jQuery ver 1.6.x捆绑在一起，不支持label button元素（自1.8版本起支持）。否则你可以使用：

click()

所以恕我直言上面写的是你能在你的情况下做的一切。我不知道是否有label button方法的替代方法。如果我错了，有人会纠正我。

此致

如何在两个p：selectOneRadios中专门选择一个单选按钮

1 个答案:

修改