使用javascript检查f：基于p：itemManyCheckbox的项目值 [英] check f:items value based on p:selectManyCheckbox using javascript

问题描述

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

I would like to know how to check f:items value based on p:selectManyCheckbox using javascript.

我做的是
Xhtml

What I did is 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

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：items选中的值被设置为true，但在用户界面中没有被选中。
有人可以指出哪里出错了吗？

My problen is when 'select all' is checked,the f:items checked values are being set as true but in user interface it is not being checked. Can anybody point out where have i gone wrong?

推荐答案

只需你可以这样做：

<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值。

The onchange of the booleanCheckbox would control the manyCheckbox values.

现在更改事件

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 。

这篇关于使用javascript检查f：基于p：itemManyCheckbox的项目值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！