Cómo obtener la opción seleccionada de P: SelectOnerAdio usando JavaScript

Question

¿Cómo se obtiene qué radio se selecciona dentro? p:selectOneRadio ¿Usando JavaScript/jQuery?

Desde el p:selectOneRadio No usa etiquetas de radio No tengo idea de cómo obtener la opción marcada con selectores CSS.

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

Answer 1

Puede usar la solución jQuery o elegir una solución simple de JavaScript:

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

Vea la publicación de Coderanch: http://www.coderanch.com/t/210871/jsf/java/selectoneradio-javascript-value

ACTUALIZACIÓN: Debo admitir que estoy en un departamento, y lo siento, pero ayer no he tenido mucho tiempo ...

Debo decir que no he podido obtener el valor de radio en la antigua forma de 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>

Por otro lado, esta solución codificada funciona:

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

, pero, por supuesto, debido a la alimentación de primefaces, hay una solución del lado del servidor (usando el componente 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>

El código del lado del servidor:

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

El componente ReuqestContext se puede encontrar aquí: http://www.primefaces.org/showcase-labs/ui/requestcontext.jsf (solo para PF 3)

Answer 2

El problema podría resolverse fácilmente con jQuery find () utilizando el método getJQ del widget pf:

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

Podemos obtener el valor actual llamando:

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

Answer 3

Si solo necesita el valor del elemento seleccionado en JS, puede llamar a su función con this.value parámetro. Mire dentro de PF generado HTML:

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

para cada selectItem. Por eso this.value funciona perfectamente, no es necesario buscar 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>

O puedes pasar this.id en función para usarlo en jQuery Selector.

Answer 4

tienes que usa el :comprobado Pseudo Selector: Más información aquí: http://api.jquery.com/checked-selector/

 $(":checked")

Answer 5

Todo lo que necesita hacer es deshabilitar todos los botones de radio, excepto el que se verificó como:

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

Y aquí está tu guión:

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 6

Hay una solución de una línea a esta pregunta que también maneja el caso en el que tiene múltiples entradas SelectOnerAdio en una página.

Si se llama a su forma myForm, y su entrada SelectOnerAdio tiene la ID myRadio, entonces la siguiente línea obtendrá el valor seleccionado:

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

Esto funciona porque todas las entradas internas tienen una identificación que comienza con myForm:myRadio. La línea anterior encuentra todas las entidades que comienzan con esa cadena y selecciona solo las verificadas. Dado que solo se puede verificar un botón de radio a la hora, esto le da el botón de radio seleccionado. Entonces simplemente podemos obtener su valor.