title: check f:items value based on p:selectManyCheckbox using javascript
body: <p>I would like to know how to check f:items value based on p:selectManyCheckbox using javascript.</p>
  
  <p>What I did is
  Xhtml </p>
  
  <pre><code>&lt;p:selectBooleanCheckbox itemLabel="Select All" onchange="changeSelectAllStatus(this);"
      value="#{myBean.selectAllStatus}"
      id="selectAllStatus" style="margin-left:4px;" &gt;
  &lt;/p:selectBooleanCheckbox&gt;
  
  &lt;p:selectManyCheckbox onchange="changeServiceStatus(this);"
      styleClass="servicestatusstyle"
      value="#{myBean.serviceStatusFilterList}"
      layout="pageDirection" id="empListSub"&gt;
      &lt;f:param name="tabValue" value="1" /&gt;
      &lt;f:selectItems value="#{myBean.serviceStatusList}" var="status"
              itemLabel="#{status.title}" itemValue="#{status.id}"/&gt;
  &lt;/p:selectManyCheckbox&gt;
  </code></pre>
  
  <p>The generated html is</p>
  
  <p><img src="https://i.stack.imgur.com/7ZMbV.png" alt="enter image description here"></p>
  
  <p>Javascript</p>
  
  <pre><code>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;
  
          }
      }
  </code></pre>
  
  <p>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>