Primefaces selectManyCheckbox javascript问题

Question

我使用JSF 2.2和Primefaces 4.0开发了一个应用程序，我有以下问题：

在一个有两列的panelGrid中，我有两个selectManyCheckbox (SMC1包含队列，SMC2包含用户；在用户和队列之间，我有一个ManyToMany关系)。

我想要做的是，当我在SMC1中单击复选框以在javascript的帮助下更改SMC2中相应复选框标签的背景时。

我正在考虑使用Ajax调用来实现它，如下面的场景所示：

1. 单击队列复选框；
2. 使用相应的JSON端脚本将Ajax调用发送到服务器，获取关联的用户并返回带有相应userIds的JSON字符串；
3. 在客户端我有一个从服务器接收JSON的回调函数，应该突出显示相应的复选框标签；

我现在的具体问题是，我不知道如何选择每个标签来更改背景，因为Primefaces生成的标签没有id。

<h:form id="aUsers">
<p:panelGrid columns="2" style="width:100%; margin-bottom:10px" cellpadding="5">

<p:selectManyCheckbox onchange="submitNewCheckBoxValue([{name:'qId',value:this.value}]);" id="q" value="#{bean.qIds}" layout="grid" columns="3" converter="javax.faces.Long" converterMessage="Error."> 
    <f:selectItems  value="#{bean.qs}" 
            var="q" 
            itemValue="#{q.id}" 
            itemLabel="#{q.name}"/>
</p:selectManyCheckbox>  

<p:selectManyCheckbox id="users" value="#{bean.usIds}" layout="grid" columns="3" converter="javax.faces.Long" converterMessage="Error."> 
    <f:selectItems  value="#{bean.us}" 
            var="u"
            itemValue="#{u.id}"
            itemLabel="#{u.name}"/>  
</p:selectManyCheckbox>

</p:panelGrid>
<p:remoteCommand name="submitNewCheckBoxValue" 
                 process="@this q"
                 actionListener="#{bean.xxx()}" 
                 oncomplete="handleSaveRequest(xhr,status,args);" />
</h:form>  

我的javascrip代码是：

function handleSaveRequest(xhr, status, yourobject) { 
var f = document.getElementById('myForm');
var iLen=f.elements.length;
for (var i=0; i<iLen; i++) {
        if (f.elements[i].type == "checkbox" && f.elements[i].id.substr(0,12) == 'myForm:users') {
            //i don't know what to do next  
        }
}

}

为一个复选框生成的源代码和由用户selectManycheckbox生成的附加标签

<td>
<div class="ui-chkbox ui-widget">
    <div class="ui-helper-hidden-accessible">
        <input id="myForm:users:0" name="myForm:users" value="3" type="checkbox">
    </div>
    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
        <span class="ui-chkbox-icon ui-c"></span>
    </div>
</div>
</td>
<td>
    <label for="myForm:users:0">username</label>
</td>  

Answer 1

我已经在jquery的帮助下解决了这个问题，如下所示

var f = document.getElementById('myForm');
var iLen=f.elements.length;
for (var i=0; i<iLen; i++) {  
    if(f.elements[i].id.substr(0,12) == 'myForm:users') {
        $(document).ready(function(){
            elemDivParent1 = $(f.elements[i]).parent("div");  
            elemDivParent0 = $(elemDivParent1).parent("div");  
            elemParentTd = $(elemDivParent0).parent("td");  
            elemSiblingTd = $(elemParentTd).next();  
            $(elemSiblingTd).addClass("light");  
    });
}