Как получить выбранный вариант из p: selectOneRadio с помощью javascript

Как узнать, какое радио выбрано в p:selectOneRadio, используя javascript/jquery?

Поскольку p:selectOneRadio не использует радиотеги, я понятия не имею, как получить отмеченную опцию с помощью селекторов CSS.

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

person Rajat Gupta    schedule 05.12.2011    source источник
comment
Я обновил свой ответ, извините за возникшую путаницу из-за нехватки времени...   -  person spauny    schedule 06.12.2011


Ответы (6)


Вы можете использовать решение 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)

person spauny    schedule 05.12.2011
comment
Это не возвращает проверенное значение. Это возвращает только то, проверен ли сам элемент или нет. - person BalusC; 05.12.2011
comment
@BalusC Да, плохо, он должен содержать цикл for, а вместо этого ноль должен быть переменной итератора ... - person spauny; 05.12.2011
comment
чтобы получить проверенный элемент, что перебирать и как? - person Rajat Gupta; 05.12.2011
comment
Просто перебирайте переключатели, которые вы получили из DOM. Возможно, вы захотите переформулировать свой вопрос, чтобы оставить JSF вне контекста и опубликовать только сгенерированный JSF код разметки HTML (и изменить тег вопроса), чтобы пользователи JS/jQuery могли вам помочь. - person BalusC; 06.12.2011
comment
@BalusC Я обновил свой ответ, извините за возникшую путаницу из-за нехватки времени... - person spauny; 06.12.2011
comment
@Marcos Пожалуйста, скажите мне, если вы что-то не поняли или если ваша проблема не решена ... - person spauny; 06.12.2011
comment
@Маркос какое решение? вы пробовали RequestContext? Должен признаться, что это мой фаворит :) - person spauny; 06.12.2011
comment
@Spauny: На самом деле я использовал $element[0].value, чтобы напрямую получить значение выбранного радио, где $element было передано с использованием this из onChange p:selectOneRadio. Я не хотел помещать какой-либо код для просмотра в bean-компоненты, поэтому выбрал этот путь... и это тоже выглядело аккуратно. В любом случае, большое спасибо за помощь... :) - person Rajat Gupta; 06.12.2011
comment
частная строка РадиоВал; находится в другом пакете, но вам нужно сохранить конфиденциальность, как вы можете это сделать? - person ; 26.09.2017
comment
@delive Как radioVal может быть приватным, если он должен быть доступен компоненту selectOneRadio? У вас должен быть геттер и сеттер для этого. Что ты пытаешься сделать? - person spauny; 26.09.2017
comment
Я думаю, что лучше всего с контекстом для проверки/получения значений, которые создают функцию javascript. Но спасибо = - person ; 27.09.2017

Проблема может быть легко решена с помощью jquery find() с использованием метода getJQ виджета pf:

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

мы можем получить текущее значение, вызвав:

PF('mySelectName').getJQ().find(':checked').val();
person Dmitry Smirnov    schedule 15.05.2015

Если вам просто нужно значение выбранного элемента в 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.

person Sasa7812    schedule 26.09.2013

вы используете псевдоселектор :checked: дополнительная информация здесь: http://api.jquery.com/checked-selector/

 $(":checked")
person Pavel Nikolov    schedule 05.12.2011

Все, что вам нужно сделать, это отключить все переключатели, кроме того, который был проверен, например:

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

           }
       }

}

person Mj6    schedule 22.10.2012

Существует однострочное решение этого вопроса, которое также обрабатывает случай, когда у вас есть несколько входов selectOneRadio на странице.

Если ваша форма называется myForm, а ваш вход selectOneRadio имеет идентификатор myRadio, то следующая строка получит выбранное значение:

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

Это работает, потому что всем внутренним входам присваивается идентификатор, начинающийся с myForm:myRadio. Строка выше находит все объекты, начинающиеся с этой строки, и выбирает только отмеченные. Поскольку за один раз можно проверить только одну радиокнопку, это дает выбранную радиокнопку. Тогда мы можем просто получить его значение.

person squaregoldfish    schedule 09.05.2017