javascript - 检查所有单选按钮（JSF 组件）+ jQuery

Question

我有一个迭代数据表的表单，每一行都有一组组件，其中一个是：

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

我添加了两个触发两个类似功能的链接：

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

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

因此，当用户单击其中一个链接时，应检查所有 Charge/Waive 单选按钮。

我尝试使用以下代码检查第一个单选按钮（测试目的），但我总是得到相同的错误：

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

我得到的错误是：Sintax 错误，无法识别的表达式：billingRecordId

我确实知道 id 是正确的，因为当我查看已编译的 JSF 代码时，无线电类型的生成 ID 是：

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

所以在这一点上，我不知道我在这里缺少什么。任何的想法？

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