javascript - PrimeFaces SelectManyCheckbox - 使用 Javascript 取消选中所有复选框

Question

有没有一种简单的方法可以使用 JavaScript 选择/取消选择 p:selectManyCheckbox 中的所有复选框？

我现在已经可以使用了，但是我的方法似乎过于复杂，因为我觉得 PrimeFaces 应该很简单

代码如下:

选择 bool 复选框:

<p:selectManyCheckbox id="multiSelectPerformanceCb"
    widgetVar="multiSelectPerformanceCb"
    value="#{cc.attributes.filter.selectedCriteria}">
        <f:selectItems value="#{cc.attributes.filter.performanceCriteria}"
            var="criteria" itemLabel="#{criteria.text}"
            itemValue="#{criteria.description}" />
</p:selectManyCheckbox>

点击按钮时运行的方法:

function performanceSliderBooleanClick()
    //Uncheck the inputs
    PF('multiSelectPerformanceCb').inputs.each(function(){
        this.checked = false;
    });

    //Remove ui-state-active from the outputs
    PF('multiSelectPerformanceCb').outputs.each(function(){
        $(this).removeClass('ui-state-active');
    });
}

Answer 1

从未使用过 PrimeFaces，但看看他们的页面我会尝试这个(重要:将 [yourformid] 替换为 id表单(您没有在问题中显示表单元素))...

取消选择:

function performanceSliderBooleanClick() {
    $('#[yourformid]\\:multiSelectPerformanceCb').find('div.ui-chkbox-box')
                                                 .removeClass('ui-state-active')
                                                 .find('span.ui-chkbox-icon')
                                                 .removeClass('ui-icon-check')
                                                 .addClass('ui-icon-blank');
}

切换(全选/取消全选):

function performanceSliderBooleanClick() {
    $('#[yourformid]\\:multiSelectPerformanceCb').find('div.ui-chkbox-box')
                                                 .toggleClass('ui-state-active')
                                                 .find('span.ui-chkbox-icon')
                                                 .toggleClass('ui-icon-check ui-icon-blank');
}