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>

因此，当用户单击其中一个链接时，应选中所有收费/放弃单选按钮。

我尝试使用以下代码检查第一个单选按钮(测试目的)，但总是遇到相同的错误:

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

我收到的错误是:语法错误，无法识别的表达式:billingRecordId

我确实知道 ID 是正确的，因为当我查看编译的 JSF 代码时，为 radio 类型生成的 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 使用 CSS selectors选择 HTML DOM 树中的元素。

: 是 CSS 选择器中的一个特殊字符，代表 structural pseudo class 的开头。 。所以如果你使用

$('#frmResults:billingRecordId')

然后它基本上寻找 ID 为 frmResults 且具有与 billingRecordId 匹配的伪类的 HTML 元素。然而，由于 billingRecordId 根本不是一个有效的伪类，所以什么也找不到。

您基本上需要在 CSS 选择器语法中转义冒号。

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

或者，IMO 清理器，使用 [id] 属性选择器。

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

或者，摆脱链接的 ID 和索引。

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

(“选择ID以:chargeWaive结尾的元素，获取第一个，然后从中获取第一个单选按钮”)

另请参阅:

• How to select JSF components using jQuery?

<小时/>

作为完全不同的替代方案，您还可以执行 JSF ajax 调用来预先选择所需的单选按钮，只需在支持 bean 的 ajax 监听器方法中相应地设置模型值即可。