檢查f：項目值基於p：selectManyCheckbox使用javascript

Question

我想知道如何檢查基於p：selectManyCheckbox使用javascript的f：items值。

我所做的是 的Xhtml

<p:selectBooleanCheckbox itemLabel="Select All" onchange="changeSelectAllStatus(this);" 
    value="#{myBean.selectAllStatus}" 
    id="selectAllStatus" style="margin-left:4px;" > 
</p:selectBooleanCheckbox> 

<p:selectManyCheckbox onchange="changeServiceStatus(this);" 
    styleClass="servicestatusstyle" 
    value="#{myBean.serviceStatusFilterList}" 
    layout="pageDirection" id="empListSub"> 
    <f:param name="tabValue" value="1" /> 
    <f:selectItems value="#{myBean.serviceStatusList}" var="status" 
      itemLabel="#{status.title}" itemValue="#{status.id}"/> 
</p:selectManyCheckbox> 

生成的HTML是

的Javascript

function changeSelectAllStatus(element) 
    { 
     var selectAll = element.checked; 
     var serviceStatusChildNodes = document.getElementById("accord:empListSub").getElementsByTagName('input'); 
     for (var i in serviceStatusChildNodes) { 
      if (serviceStatusChildNodes[i].type=='checkbox') { 
       serviceStatusChildNodes[i].checked = selectAll; 
      } 
     } 

     if(selectAll) 
     { 
      selectAllStatusArray = selectAll; 

     } 
     else 
     { 
      selectAllStatusArray = selectAll; 

     } 
    } 

我的一點改進是，當選擇 '選擇全部' 被選中， f：項目檢查值被設置爲tru e但是在用戶界面中它沒有被檢查。 有人可以指出我哪裏出錯了？

Answer 1

只要你可以這樣做：

<p:selectBooleanCheckbox itemLabel="Check All" 
         widgetVar="checkAllWV" 
         onchange="selectAllCheckBoxes(PF('manyCheckWV'))"> 
</p:selectBooleanCheckbox> 

<p:selectManyCheckbox widgetVar="manyCheckWV">              
    <f:selectItems value="#{mainBean.list}"/> 
</p:selectManyCheckbox> 

的booleanCheckbox的onchange將控制manyCheckbox值。

現在更改事件

function selectAllCheckBoxes(manyCheckBoxes) { 
    manyCheckBoxes.inputs.each(function() { 
     if(PF('checkAllWV').isChecked()) { 
     $(this).prop('checked', false) 
     PF('checkAllWV').jq.find('.ui-chkbox-label').text('Uncheck all') 
     } else { 
     $(this).prop('checked', true) 
     PF('checkAllWV').jq.find('.ui-chkbox-label').text('Check all') 
     } 
     $(this).trigger('click'); 
    }) 
} 

您可以在github找到一個小例子。