我试图用PrimeFaces和JSF组件来实现jQuery，但是它不能正常工作。当我尝试使用与HTML标签相同时，它正常工作。
<input type="checkBox" id="check2"></input> <h:outputText value="Check the Box,if your permanent address is as same as current address."></h:outputText> <h:message for="checkBox" style="color:red" />
与
$("#check2").change(function() {
if ($("#check2").is(":checked")) {
$("#p2").hide();
} else {
$("#p2").show();
}
});
这是PrimeFaces / JSF的代码，它不能与jQuery正常工作：
<p:selectManyCheckBox > <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem> </p:selectManyCheckBox>
与
$("#rad").change(function() {
if ($("#rad:checked").val() == "one") {
$("#p2").hide();
} else {
$("#p2").show();
}
});
解决方法
您应该意识到jQuery可以在客户端的HTML DOM树中使用。 jQuery不像JSF源代码那样直接在JSF组件上工作，而是直接使用JSF组件生成的HTML DOM树。您需要在webbrowser中打开该页面，然后右键单击“查看源”。您将看到，JSF使用以下内容将前缀添加了具有所有父
NamingContainer组件(例如< h：form>，< h：dataTable>等)的ID的生成的HTML输入元素的ID作为默认分隔符。例如
<h:form id="foo">
<p:selectManyCheckBox id="bar" />
...
将最终生成的HTML作为
<form id="foo" name="foo">
<input type="checkBox" id="foo:bar" name="foo:bar" />
...
您需要根据该ID选择元素。然而：表示伪选择器的CSS标识符中的特殊字符。要在jQuery中使用CSS选择器在ID中选择一个元素，则需要通过反斜杠转义或使用[id = …]属性选择器或仅使用旧的getElementById()：
var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));
作为替代，您也可以使用类名：
<x:someInputComponent styleClass="someClassName" />
最终在HTML中
<input type="..." class="someClassName" />
所以你可以得到它
var $elements = $(".someClassName");
这允许更好的抽象和可重用性。当然这些元素并不是独一无二的。只有主要的布局元素，如标题，菜单，内容和页脚是非常独特的，但它们通常不在NamingContainer中。
作为另一个替代方案，您可以将HTML DOM元素本身传递到函数中：
<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
var $element = $(element);
// ...
}
也可以看看：
> How to use JSF generated HTML element ID with colon “:” in CSS selectors?
> How to refer to a JSF component Id in jquery?
> By default,JSF generates unusable ids,which are incompatible with css part of web standards
