Jquery 在具有动态ID的多个SelectManyCheckBox中选择所有项目

我想使用JSF上的PrimeFaces组件在一些复选框组中选中all复选框

我的代码如下：

<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
    <p:outputLabel value="Confere:" style="font-weight:bold!important" />
    <p:selectManyCheckbox
        value="#{funcionarioBean.funcionario.permissaoConfere.stringArray}">
        <f:selectItem itemLabel="Consulta" itemValue="C" />
        <f:selectItem itemLabel="Edição" itemValue="E" />
        <f:selectItem itemLabel="Deleção" itemValue="D" />
        <f:selectItem itemLabel="Inclusão" itemValue="I" />
        <f:selectItem itemLabel="Relatório" itemValue="R" />
        <f:selectItem itemLabel="Check All"/>
    </p:selectManyCheckbox>
</h:panelGrid>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
    <p:outputLabel value="Visitante:" style="font-weight:bold!important" />
    <p:selectManyCheckbox
        value="#{funcionarioBean.funcionario.permissaoVisitante.stringArray}">
        <f:selectItem itemLabel="Consulta" itemValue="C" />
        <f:selectItem itemLabel="Edição" itemValue="E" />
        <f:selectItem itemLabel="Deleção" itemValue="D" />
        <f:selectItem itemLabel="Inclusão" itemValue="I" />
        <f:selectItem itemLabel="Relatório" itemValue="R" />
        <f:selectItem itemLabel="Check All"/>
    </p:selectManyCheckbox>
</h:panelGrid>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
    <p:outputLabel value="Ocorrências:" style="font-weight:bold!important" />
    <p:selectManyCheckbox
        value="#{funcionarioBean.funcionario.permissaoOcorrencia.stringArray}">
        <f:selectItem itemLabel="Consulta" itemValue="C" />
        <f:selectItem itemLabel="Edição" itemValue="E" />
        <f:selectItem itemLabel="Deleção" itemValue="D" />
        <f:selectItem itemLabel="Inclusão" itemValue="I" />
        <f:selectItem itemLabel="Relatório" itemValue="R" />
        <f:selectItem itemLabel="Check All"/>
    </p:selectManyCheckbox>
</h:panelGrid>

---

我尝试使用发布的代码，但只有当页面上只有一组复选框时，它才起作用。

将其包装在可重用的复合组件中，如下所示：

/resources/composites/selectManyCheckboxAll.xhtml

/resources/composites/selectManyCheckboxAll.css

。选中所有复选框{
空白：nowrap；
}
.复选框所有。ui选择多个复选框，
.复选框全部。全部{
显示：内联块；
垂直对齐：中间对齐；
}
.复选框所有.all.ui chkbox{
利润率：1×4×0；
垂直对齐：顶部；
}
.复选框所有.所有标签{
显示：内联块；
利润上限：4倍；
}

/resources/composites/selectManyCheckboxAll.js

$(document).on("click", ".checkboxes-all .all .ui-chkbox-box, .checkboxes-all .all input", function() {
    var $composite = $(this).closest(".checkboxes-all");
    var widgetAll = PrimeFaces.widgets[$composite.data("widget-all")];
    var widgetCheckboxes = PrimeFaces.widgets[$composite.data("widget-checkboxes")];

    widgetCheckboxes.inputs.prop("checked", !widgetAll.isChecked()).click();
});

$(document).on("click", ".checkboxes-all .ui-selectmanycheckbox input", function() {
    var $composite = $(this).closest(".checkboxes-all");
    var widgetAll = PrimeFaces.widgets[$composite.data("widget-all")];

    if (!$(this).is(":checked") && widgetAll.isChecked()) {
        widgetAll.uncheck();
    }
});

用法：

...

你知道为什么这可以在本地运行（运行Wildfly），但不能在运行JBoss7的开发服务器上运行吗？我正在成功地使用其他复合组件。你的实现相当流畅，btw@jeff：如果PrimeFaces的版本完全相同，可能是服务器中使用的JSF实现中的某些错误？WF使用2.2.x，AS7使用2.1.x。JS控制台或HTTP流量中有任何线索/差异吗？嗯，是的，“dev server.com/AppName/javax.faces.resource/theme.css.xhtml”HTTP 404 not found“本地我不知道这个错误，如果他们都选择了value all按钮，那么解决方案是将这个添加到JS文件-下一个注释-$（document）.ready（函数（）{var$composite=$（）.checkboxes all>.ui selectmanycheckbox“）.closest（.checkboxes all”）；var widgetAll=PrimeFaces.widgets[$composite.data（“widget all”）]；var widgetCheckboxes=PrimeFaces.widget[$composite.data（“widget checkboxes”）；让arr=widgetCheckboxes.inputs；for（arr中的var e）{console.log（arr[e]）；if（arr[e]。标记名==“INPUT”）{if（！arr[e].checked）{return；}}}}widgetAll.check（）；}）；