Not working: Javascript to select all checkboxes from Header checkbox in Visualforce page

Question

I am displaying a table with checkboxes using wrapper class. Now I want to add a checkbox to the header, when selected it should select all row-checkboxes and when deselected it should deselect all row-checkboxes, when I deselect one row-checkbox, Headercheckbox should get deselected (not working) AND When selected any checkbox should Enable button and disable button on deselection (not working - issue fixed with action Junction). Question: When javascript runs and selects all checkboxes, Because of ActionSupport, method in the controller should enable or disable button but it doesn't do that why?

Any inputs on First issues please?

 <apex:page Controller="AccountController" showHeader="False" sidebar="false" docType="Html-5.0">

            <apex:commandButton id="displayButton" value="Edit" action="{!getItems}" disabled="{!disableBtn}"/>
            <br/>

        <apex:outputPanel > 
         <div>   
            <table>
                    <thead>
                        <tr>
                            <th><apex:inputCheckbox *styleclass="inputHeaderCkbx"* > 
<apex:actionSupport event="onclick" action="{!setChkBoxValue}" onsubmit="checkAll(this,'checkBoxId')" rerender="displayButton"/> </apex:inputCheckbox>
                            </th>
                            <th>Account type</th>
                            <th>name</th>  
                        </tr>
                    </thead>
                    <tbody>
                        <apex:repeat value="{!accItem}" var="tt">
                                <tr>
                                    <td><apex:inputCheckbox id="checkBoxId" styleclass="inputCkbx" value="{!tt.selected}" >
                                            <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="displayButton" *onclick="SingleChkbxAction()"*/> 
                                        </apex:inputCheckbox>
                                    </td>
                                    <td>{!tt.Account.type__c}</td>
                                    <td>{!tt.Acount.name}</td>
                                </tr>

                        </apex:repeat>
                    </tbody>
                </table>      
            </div>
        </apex:outputPanel>
   <script>

  function checkAll(cb,receivedInputID)
{
    var inputElem = document.getElementsByTagName("input");  
    for(var i=0; i<inputElem.length; i++)
    {             
        if(inputElem[i].id.indexOf(receivedInputID)!=-1){                                        
            inputElem[i].checked = cb.checked;
        }
    }
}
</script>

Controller:

 public void setChkBoxValue(){
    Integer count =0;
        for(Item i: accItem){
            if(i.selected == true){
                count++;
            } 
        }
        if(count>0){
             disableBtn = false;
        }else disableBtn = true;
}

Solution: I added this and it works. let me know if there is a best way to do this. Thanks

 *function SingleChkbxAction(){
    var count=0;
    var length = document.getElementsByClassName('inputCkbx').length;
    for(var i=0;i< document.getElementsByClassName('inputCkbx').length;i++) {
        if(document.getElementsByClassName('inputCkbx')[i].checked == true){
            count++;
        }
    }
    if(count <= length)
        document.getElementsByClassName('inputHeaderCkbx')[0].checked=false;
    if(count == length)
        document.getElementsByClassName('inputHeaderCkbx')[0].checked=true;
}*

Answer 1

    Try below code. This work fine for me and will cover all your scenarios.
    <apex:pageBlockTable value="{!wrapperList}" var="c" id="table">
        <apex:column >
            <apex:facet name="header">
                <apex:inputCheckBox styleclass="SelectAllClass" onclick="selectAllCheckboxes();"   /> 
            </apex:facet> 

            <apex:inputCheckBox value="{!c.selected}"    styleclass="singleClass"    onclick="selectSingleCheckbox()"/>
        </apex:column>


        <!-- This is how we access the contact values within our cContact container/wrapper -->
        <apex:column value="{!c.con.LastName}" />
        <apex:column value="{!c.con.Email}" />
        <apex:column value="{!c.con.Phone}" />
    </apex:pageBlockTable>


    Javascript code in visulforce page - 
    <script type="text/javascript">
           var total=0;
           jQuery('[id$=myPlaceholder]').text(total);   
            function selectAllCheckboxes() {
               console.log('The checkboxx:'+document.getElementsByClassName('SelectAllClass')[0].checked);
               if(document.getElementsByClassName('SelectAllClass')[0].checked) {
                   for(var i=0;i< document.getElementsByClassName('singleClass').length;i++) {
                      document.getElementsByClassName('singleClass')[i].checked = true;
                      document.getElementsByClassName('singleClass')[i].parentNode.parentNode.className = "yellow";
                      total = document.getElementsByClassName('singleClass').length;
                      console.log('total is '+total);
                      document.getElementsByClassName('placeHolder')[0].innerHTML = total;

                   }
               }
               else {
                   for(var i=0;i< document.getElementsByClassName('singleClass').length;i++) {
                      document.getElementsByClassName('singleClass')[i].checked = false;
                      document.getElementsByClassName('singleClass')[i].parentNode.parentNode.className = "white";
                      total = 0;
                      console.log('total is '+total);
                      document.getElementsByClassName('placeHolder')[0].innerHTML = total;
                   }
               }
            }


            function selectSingleCheckbox() {
            var length = document.getElementsByClassName('singleClass').length;
            var count=0;
             for(var i=0;i< document.getElementsByClassName('singleClass').length;i++) {
                      if(document.getElementsByClassName('singleClass')[i].checked == true){

                        document.getElementsByClassName('singleClass')[i].parentNode.parentNode.className = "yellow";
                        count++;
                        document.getElementsByClassName('placeHolder')[0].innerHTML = count;
                      } 
               }
               for(var i=0;i< document.getElementsByClassName('singleClass').length;i++) {
                      if(document.getElementsByClassName('singleClass')[i].checked == false){
                        document.getElementsByClassName('singleClass')[i].parentNode.parentNode.className = "white";
                        document.getElementsByClassName('placeHolder')[0].innerHTML = count;
                      } 
               }
               console.log('count is '+count);
               total=count;
               console.log('total is '+total);
               if(length==count) {
                   document.getElementsByClassName('SelectAllClass')[0].checked=true;
               }
               else {
                   document.getElementsByClassName('SelectAllClass')[0].checked=false;
               }

            }

        </script>