修改PrimeFaces selectCheckboxMenu的勾选行为需求求助

首先给你的p:selectCheckboxMenu添加唯一ID和onShow事件绑定，方便后续JavaScript操作：

<p:selectCheckboxMenu id="cityMenu"
                      dynamic="true"
                      filter="true" filterMatchMode="startsWith"
                      label="Cities"
                      style="width: 15rem" panelStyle="width: 15rem" scrollHeight="250"
                      value="#{checkboxView.selectedCities}"
                      onShow="handleMenuShow(this)">
    <f:selectItems value="#{checkboxView.cities}"/>
</p:selectCheckboxMenu>

然后添加以下JavaScript代码，实现你需要的两个功能：

// 处理面板打开事件
function handleMenuShow(menu) {
    const $menu = $(menu);
    const $headerCheckbox = $menu.find('.ui-selectcheckboxmenu-header-checkbox');
    const $itemCheckboxes = $menu.find('.ui-selectcheckboxmenu-item-checkbox:checked');

    // 打开面板且无选中子项时，勾选顶部全选框
    if ($itemCheckboxes.length === 0 && !$headerCheckbox.is(':checked')) {
        $headerCheckbox.prop('checked', true)
                       .trigger('change');
    }
}

// 监听子项复选框的点击事件
$(document).on('change', '#cityMenu .ui-selectcheckboxmenu-item-checkbox', function() {
    const $menu = $(this).closest('.ui-selectcheckboxmenu');
    const $headerCheckbox = $menu.find('.ui-selectcheckboxmenu-header-checkbox');

    // 勾选任意子项时，取消顶部全选框的勾选
    if ($(this).is(':checked') && $headerCheckbox.is(':checked')) {
        $headerCheckbox.prop('checked', false)
                       .trigger('change');
    }
});

代码说明 #

• 面板打开逻辑：通过onShow事件触发handleMenuShow函数，获取面板内的全选框和已选中的子项复选框。如果没有选中的子项且全选框未勾选，就勾选全选框并触发change事件同步PrimeFaces的组件状态。
• 子项勾选逻辑：通过事件委托监听子项复选框的change事件，当有子项被勾选且全选框处于勾选状态时，取消全选框的勾选并同步状态。

注意：如果你的组件ID不是cityMenu，需要同步修改JavaScript中的选择器#cityMenu。

内容的提问来源于stack exchange，提问作者softend