SelectOneRadio set checked on radioButton
<p>I want to set the state checked on a p:selectOneRadio using javascript.</p>

<p>I manage to do it but it only works with the first elemt on the selectOneRadio list here's the code.</p>

<pre><code>&lt;h:form id="formID"&gt;
    &lt;p:outputPanel id="customPanel" style="margin-bottom:10px"&gt;
        &lt;p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom"&gt;
            &lt;f:selectItem itemLabel="Red" itemValue="Red" /&gt;
            &lt;f:selectItem itemLabel="Green" itemValue="Green" /&gt;
            &lt;f:selectItem itemLabel="Blue" itemValue="Blue" /&gt;
        &lt;/p:selectOneRadio&gt;

        &lt;h:panelGrid columns="2" cellpadding="5" border="1"&gt;
            &lt;p:radioButton id="opt1" for="customRadio" itemIndex="0" /&gt;
            &lt;h:outputLabel for="opt1" value="Red" /&gt;

            &lt;p:radioButton id="opt2" for="customRadio" itemIndex="1" /&gt;
            &lt;h:outputLabel for="opt2" value="Green" /&gt;

            &lt;p:radioButton id="opt3" for="customRadio" itemIndex="2" /&gt;
            &lt;h:outputLabel for="opt3" value="Blue" /&gt;

            &lt;p:commandButton value="select" ajax="true" onclick="selectRadios()" update="@form"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:outputPanel&gt;
&lt;/h:form&gt;
</code></pre>

<p>JavaScript</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function selectRadios() {
        jQuery("input[name='formID:customRadio']:first").prop('checked', true);
    }
    ;
&lt;/script&gt;
</code></pre>

<p>As I load the page and click on the commandButton it checked the first radiobutton and its fine but I also want to know how to check the other two.</p>

<p>Also if there is other way that can change the state to cheked of that radiobutton without using javascript pls let me know.</p>

<p>Thanks for the help.</p>

<p>-Keva</p>