2

JSF 2.0、Primefaces 3.1.1

2つの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（）関数について。

ここで要点：

要素をより適切に操作するには、ラッピングでids使用prependId="false"します。formp:selectOneRadio

ページを再読み込みしたくないので、で使用ajax="true"しp:commandButtonます。

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

Primefacesを指定するidと、レンダリングされたHTMLページの属性として使用されます。もちろん、要素で使用しない場合、primefacesはラジオ属性に追加されるため、のように見えます。それで。_p:selectOneRadionameinput type="radio"prependId="false"formforms idnamename="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をクリックすると、関連するUIアイコンが取得されるため（少なくとも最初のクリックでは）、作成radio buttonせずに（テーマを使用しながら）プライムフェイスでを選択する方法がわかりません。あなたがそれで大丈夫なら、読み続けてください。requestradio button request

あなたは古典を作りたくないし、あなたのタイプを変えたくHTTP requestないので：AJAX requestcommandButton

<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();
            };

IDofは+ ：xradio buttonとして使用されます。ここで、xはの実際の注文番号です。（0が最初です）。ボタン自体の代わりにクリックしたいので、これは関数の適切な使用方法です。ここで説明します。labelbuttonclick()label

注： Primefaces ver 3.1.1は、要素の更新メソッドをサポートしないjQuery ver 1.6.xにバンドルされていbuttonます（ver 1.8以降でサポートされています）。それ以外の場合は使用できます：

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

したがって、上記のIMHOは、状況に応じてできることのすべてです。方法に代わるものがあるかどうかはわかりませんbutton refresh。私が間違っていれば、誰かが私を確実に訂正してくれるでしょう。

よろしく

于 2012-05-12T22:57:24.473 に答える