2017-10-17 159 views
2

是否有一种简单的方法来选择/取消选择使用JavaScript的p:selectManyCheckbox中的所有复选框?PrimeFaces SelectManyCheckbox - 取消选中所有使用Javascript的复选框

我找到了现在的工作,但我的方法似乎的东西过于复杂,我觉得应该从PrimeFaces

下面

代码简单:

的选择布尔复选框:

<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'); 
    }); 
} 

回答

1

Neve r参数使用PrimeFaces,但在看看他们的网页我想尝试这个(重要:与形式的id替换[yourformid](你不显示在你的问题的表单元素))...

FOR取消选择

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'); 
} 
+0

这适用于处理UI的JavaScript解决方案,但无法与后端连接起作用。我正在寻找更多的PrimeFaces解决方案潜在的使用widgetVar或内置PrimeFaces方法,但我给了你一个upvote,因为我喜欢这个解决方案,尽可能简化我在多行中做的UI清理 –

+1

@TonyScialo:你的解决方案更多符合PrimeFaces的小部件方法,并且不依赖于组件的结构设计。你可以对[source]做一些小的修改(https://github.com/primefaces/primefaces/blob/master/src/main/resources/META-INF/resources/primefaces/forms/forms.selectmanycheckbox.js)这个组件,并使其成为一个真正的小部件功能(检查其他可比较的组件)。然后,您可以通过提交请求将其作为发行人的增强功能进行归档。 – Kukeltje

相关问题