h:selectoneradio not selected item in Javascript

Question

I don't know how this meaningless thing is driving my nuts, well, I have as follows:

I'm trying to set a radio button value when a modal form is displayed, this is the code for the radio button:

 <h:selectOneRadio layout="lineDirection" class="validate[required]" id="publico-form" value="#{lineasBean.publico}">
                        <f:selectItem id="y" itemLabel="SI" itemValue="Y"/> 
                        <f:selectItem id="n" itemLabel="NO" itemValue="n"/>
                    </h:selectOneRadio>

That render as follows:

<table id="form-insertar-linea:publico-form" class="validate[required]">
<tr>
   <td>
    <input type="radio" name="form-insertar-linea:publico-form" id="form-insertar-linea:publico-form:0" value="Y" /><label for="form-insertar-linea:publico-form:0"> SI</label>       </td>
 <td>
   <input type="radio" name="form-insertar-linea:publico-form" id="form-insertar-linea:publico-form:1" value="n" /><label for="form-insertar-linea:publico-form:1"> NO</label> </td>
</tr>
 </table>

Then, with a Javascript function I'm trying to select with the follow code:

 $("input:radio[name='form-insertar-linea:publico-form']").attr('checked',true);

That works totally but only for 'NO' value, what I want is select the button value according the value what I want 'Y' or 'N', I'm tried with select by id but jQuery doesn't recognize the pattern ":" when I make the selector:

 $("#form-insertar-linea:publico-form:0").attr('checked',true);

Also I tried this one based on nth-child but nothing happens:

 $("input:radio[name='form-insertar-linea:publico-form']:nth-child(0)").attr('checked',true);

Any ideas?

Regards!

T.J. Crowder · Answer 1 · 2013-05-31T11:47:53.763

The selector input:radio[name='form-insertar-linea:publico-form'] matches both of your radio buttons. So (since they're mutually-exclusive) I'm not surprised that when setting checked on them, the second one wins.

To specifically target the second one, you have to specifically target the second one. By id:

$("#form-insertar-linea\\:publico-form\\:0").attr('checked', true);

(Note that I had to put a backslash in front of the : character in the selector, because : is a special character in CSS selectors. The backslash escapes the character [see the second bullet point]. And because I was writing that in a string literal, to actually pass a backslash to the selector engine, I have to escape it in the string so JavaScript doesn't use it as a character escape, hence two backslashes.)

Or do it by value:

// For Yes
$("input:radio[name='form-insertar-linea:publico-form'][value='Y'").attr('checked',true);

// Or for no
$("input:radio[name='form-insertar-linea:publico-form'][value='n'").attr('checked',true);

(We didn't need to escape the : in those because it's already within quotes; the : isn't special in value strings.)

The first one will fail for the reasons explained in this answer: http://stackoverflow.com/a/7928290/ The `:` is a special character in CSS selectors representing a pseudoselector. You know, jQuery uses CSS selectors to select elements from DOM. — BalusC, May 31 '13 at 11:17
@BalusC: Thanks, I didn't look closely enough at it! I've escaped them now and added an explanation. — T.J. Crowder, May 31 '13 at 11:48

h:selectoneradio not selected item in Javascript

1 Answers1