Check All Radio Buttons (JSF Component) + jQuery

Question

I've a form in which I'm iterating a datatable, each row has a set of components and one of them is:

<h:selectOneRadio id="chargeWaive" onclick="alert(this.id);" >              <f:selectItem itemLabel="Charge" itemValue="charge" />                  <f:selectItem itemLabel="Waive" itemValue="waive" />
</h:selectOneRadio>

I've added two links that triggers two similar functions :

<a href="#" onclick="selectAllCharge();">
   <h:outputText value="Charge All" />
</a>

<a href="#" onclick="selectAllWaive();">
   <h:outputText value="Waive All" />
</a>

So when the user clicks on one these links, all the Charge/Waive radiobuttons should be checked.

I've tried to check the first radio button (test purpose) by using one the following codes, but I always get the same error:

$('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', true);   $('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', 'checked');
$('#frmResults:billingRecordId:0:chargeWaive:0').prop("checked", true); 

The error that I'm getting is: Sintax error, unrecognized expression: billingRecordId

I do know the id is correct because when I look into the compiled JSF code the generated ID for the radio type is:

<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:0" value="charge" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:0"> Charge</label>

<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:1" value="waive" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:1"> Waive</label>

So at this point I don't know what I'm missing here. Any idea?

Answer 1

jQuery uses CSS selectors to select elements in the HTML DOM tree.

The : is a special character in the CSS selector representing the start of structural pseudo class. So if you use

$('#frmResults:billingRecordId')

then it's basically looking for a HTML element with ID of frmResults and having a pseudo class matching billingRecordId. However, as billingRecordId is not a valid pseudo class at all, nothing will be found.

You'd basically need to escape the colon in CSS selector syntax.

$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0')

Or, IMO cleaner, use the [id] attribute selector.

$('[id="frmResults:billingRecordId:0:chargeWaive:0"]')

Or, to get rid of the chained IDs and indexes.

$('[id$=":chargeWaive"]:first :radio:first')

("select elements with ID ending on :chargeWaive, get the first, then get the first radio button from it")

See also:

• How to select JSF components using jQuery?

---

As a completely different alternative, you can also perform a JSF ajax call to preselect the desired radiobuttons by just setting the model value accordingly in the backing bean's ajax listener method.

Answer 2

Colons can cause problems within jquery selectors. Try escaping them with a double backslash ala:

$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0').attr('checked', true);

Answer 3

Did you try this way

Also use .prop() instead of .attr()

$('[id^="frmResults:billingRecordId:0:chargeWaive:"]').prop("checked", true);