如何使用 javascript 从 p:selectOneRadio 获取选定的选项答案

【问题标题】：How to get the selected option from p:selectOneRadio using javascript如何使用 javascript 从 p:selectOneRadio 获取选定的选项
【发布时间】：2012-01-13 05:02:02
【问题描述】：

如何使用 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>

【问题讨论】：

我已经更新了我的答案，很抱歉由于时间不足造成的混乱......

标签： jsf primefaces selectoneradio

【解决方案1】：

通过使用 pf 小部件的 getJQ 方法，可以使用 jquery find() 轻松解决该问题：

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

我们可以通过调用获取当前值：

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

【讨论】：

【解决方案2】：

您可以使用jquery解决方案或选择简单的javascript解决方案：

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

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

更新：我必须承认我在一个部门，对此我很抱歉，但昨天我没有太多时间......

我必须说我无法以老式的 javascript 方式获取 radio 值：

                 <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）

【讨论】：

这不会返回检查值。这仅返回项目本身是否被选中。
@BalusC 是的，我的错，它应该包含一个 for 循环，而零应该是迭代器变量......
获取选中的项目，迭代什么以及如何？
只需遍历从 DOM 获得的单选按钮。您可能希望重新构建您的问题以将 JSF 排除在上下文之外并仅发布 JSF 生成的 HTML 标记代码（并重新标记问题），以便 JS/jQuery 用户可以更轻松地帮助您。
@BalusC 我已经更新了我的答案，很抱歉由于时间不足而造成的混乱......

【解决方案3】：

如果您只需要 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 选择器中使用它。

【讨论】：

【解决方案4】：

你已经使用了 :checked 伪选择器：更多信息在这里：http://api.jquery.com/checked-selector/

 $(":checked")

【讨论】：

【解决方案5】：

您需要做的就是禁用除已选中的单选按钮之外的所有单选按钮：

<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;

           }
       }

}

【讨论】：

【解决方案6】：

这个问题有一个单行解决方案，也可以处理页面上有多个 selectOneRadio 输入的情况。

如果您的表单名为 myForm，并且您的 selectOneRadio 输入的 id 为 myRadio，则以下行将获得选定的值：

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

这是可行的，因为所有内部输入都被赋予了一个以myForm:myRadio 开头的 id。上面的行查找以该字符串开头的所有实体，并仅选择选中的实体。由于一次只能检查一个单选按钮，因此这给出了选定的单选按钮。然后我们就可以简单地获取它的值了。

【讨论】：