如何從p：selectOneRadio使用javascript獲得選定的選項

Question

如何使用javascript/jquery在p:selectOneRadio中選擇哪個收音機？

由於p:selectOneRadio沒有使用無線標籤我不知道如何使用CSS選擇器得到選項。

<p:selectOneRadio onchange="reactToChangedRadio()" > 
       <f:selectItem itemLabel="....." itemValue="..." /> 
       <f:selectItem itemLabel="....." itemValue="..." /> 
       <f:selectItem itemLabel="....." itemValue="..." /> 
    </p:selectOneRadio> 

Answer 1

您可以使用jQuery的解決方案，或者選擇一個簡單的JavaScript解決方案：

document.getElementById("myFormId:mySelectId")[0].checked 

查看CodeRanch的帖子：http://www.coderanch.com/t/210871/JSF/java/selectOneRadio-javascript-value

更新： 我必須承認，我在一個部門，我感到抱歉，但是昨天我沒有太多的時間......

我必須說，我一直沒能在老式的JavaScript的方式來獲得無線電值：

    <script type="text/javascript"> 
         /* <![CDATA[ */ 

         function reactToChangedRadio(){ 
          alert("I'm in!"); 
          var myval; 
          for(i=0;i<3;i++){ 
            if(document.forms['myFormId']['myFormId:myRadio'][i].checked == true){ 
             myval = document.forms['myFormId']['myFormId:myRadio'].text/value; 
            } 
           } 
           alert("val = " + myval); 
         } 
        /* ]]> */ 
       </script> 

在另一方面，這種硬編碼解決方案的工作原理：

    <script type="text/javascript"> 
         /* <![CDATA[ */ 

         function reactToChangedRadio(){ 
          alert("I'm in"); 
          var myval; 
          if(document.forms['myFormId']['myFormId:myRadio'][0].checked == true){ 
           myval = "first button"; 
          }else if(document.forms['myFormId']['myFormId:myRadio'][1].checked == true){ 
           myval = "second button"; 
          }else if(document.forms['myFormId']['myFormId:myRadio'][2].checked == true){ 
           myval = "third button"; 
          } 

          alert("val = " + myval); 
         } 
        /* ]]> */ 
        </script> 

，當然，因爲Primefaces力量，有一個服務器端解決方案（使用ReuqestContext分量）：

    <h:form id="myFormId"> 
         <p:selectOneRadio id="myRadio" value="#{handleFiles.radioVal}" > 
          <p:ajax event="change" oncomplete="handleComplete(xhr, status, args)" listener="#{handleFiles.testMethod}" /> 
          <f:selectItem itemLabel="1" itemValue=" first" /> 
          <f:selectItem itemLabel="2" itemValue=" second" /> 
          <f:selectItem itemLabel="3" itemValue=" third" /> 
         </p:selectOneRadio> 
        </h:form> 
<script type="text/javascript"> 
function handleComplete(xhr, status, args) { 
    alert("Selected Radio Value" + args.myRadVal); 
} 
</script> 

服務器端代碼：

private String radioVal; 

public String getRadioVal() { 
    return radioVal; 
} 

public void setRadioVal(String radioVal) { 
    this.radioVal = radioVal; 
} 

public void test(){ 
    RequestContext context = RequestContext.getCurrentInstance(); 
    context.addCallbackParam("myRadVal", radioVal); 
    System.out.println("radioVal: "+radioVal); 
} 

的ReuqestContext組件可以在這裏找到：http://www.primefaces.org/showcase-labs/ui/requestContext.jsf（僅適用於PF 3）

Answer 2

你喲使用：檢查僞選擇： 此處瞭解詳情：http://api.jquery.com/checked-selector/

$(":checked") 

Answer 3

所有你需要做的是禁用所有單選按鈕除了被選中的那個：

<h:selectOneRadio id="rad" ... onclick="dataTableSelectOneRadio(this)" > 
    <f:selectItems .... /> 
</h:selectOneRadio> 

這裏是你的腳本：

function dataTableSelectOneRadio(radio){ 
     var id = radio.name.substring(radio.name.lastIndexOf(':')); 
     var temp = radio.name.lastIndexOf(':') - 1; 
     var index = radio.name.substring(temp,temp+1); 
     var el = radio.form.elements; 

     for(var i = 0 ; el.length; i++) 
     { 
      if(el[i].name.substring(el[i].name.lastIndexOf(':')) == id) { 
       if(el[i].name.indexOf(index) != -1) 
        el[i].check = true; 
       else 
        el[i].check = false; 

      } 
     } 

}

Answer 4

如果你只需要選擇的項目在JS的值，你可以調用函數與this.value參數。 往裏PF生成的HTML：

<input id="{component_id}:{index}" name="{component_id}" type="radio" value="{itemValue}" 
    checked="checked" onchange="reactToChangedRadio(this.value);"> 
... 

每個selectItem。 因此this.value作品完美，無需搜索checked：

<script> 
    function reactToChangeRadio(par){ 
     alert('Value of selected item is: ' + par); 
    } 
</script> 

<p:selectOneRadio onchange="reactToChangedRadio(this.value);" > 
      <f:selectItem itemLabel="....." itemValue="..." /> 
      <f:selectItem itemLabel="....." itemValue="..." /> 
      <f:selectItem itemLabel="....." itemValue="..." /> 
</p:selectOneRadio> 

或者你也可以通過this.id到功能jQuery選擇使用它。

Answer 5

的問題可以很容易地使用jQuery find（）方法通過使用PF控件的getJQ方法解決：

<p:selectOneRadio ... widgetVar="mySelectName" .../> 

我們可以得到的電流值，通過調用：

PF('mySelectName').getJQ().find(':checked').val(); 

Answer 6

有一這個問題的在線解決方案也處理在一個頁面上有多個selectOneRadio輸入的情況。

如果您的形式被稱爲myForm，和你的selectOneRadio輸入的ID爲myRadio，那麼下面一行將獲得選擇的值：

$('[id^=myForm\\:myRadio]:checked').val() 

這工作，因爲所有的內部輸入給出開頭的ID myForm:myRadio。上面的代碼行查找以該字符串開頭的所有實體，並僅選擇已選中的實體。由於每次只能檢查一個單選按鈕，因此會顯示選定的單選按鈕。那麼我們可以簡單地抓住它的價值。