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代码时， 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调用，通过在backing bean的ajax侦听器方法中相应地设置模型值来预先选择所需的radiobuttons。

Answer 2

冒号可能会导致jquery选择器出现问题。尝试用双反斜杠ala来逃避它们：

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

Answer 3

你有没有尝试过这种方式

同时使用.prop()代替.attr()

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

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

3 个答案:

另见：