<apex:page controller="CheckAllUsingJavascriptController">

    <script type="text/javascript">

        function selectAllCheckboxes(obj,receivedInputID){

            var inputCheckBox = document.getElementsByTagName("input");                  

            for(var i=0; i<inputCheckBox.length; i++){          

                if(inputCheckBox[i].id.indexOf(receivedInputID)!=-1){                                     

                    inputCheckBox[i].checked = obj.checked;

                }

            }

        }

    </script>

    <apex:form >

        <apex:pageBlock >

            <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" title="All Accounts">

                <apex:column >

                    <apex:facet name="header">

                        <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>

                    </apex:facet>

                    <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>

                </apex:column>

                <apex:column value="{!accWrap.acc.Name}" />

                <apex:column value="{!accWrap.acc.BillingState}" />

                <apex:column value="{!accWrap.acc.Phone}" />
                
            </apex:pageBlockTable>
             <!-- Pagination -->
<table style="width: 100%"><tr>

    <td>
       Page: <apex:outputText value=" {!PageNumber} of {! CEILING(ResultSize / PageSize) }"/>
    </td>            

    <td align="center">
        <!-- Previous page -->
        <!-- Previous page -->
<!-- active -->
<apex:commandLink action="{! Previous }" value="« Previous"
     rendered="{! HasPrevious }"/>
<!-- inactive (no earlier pages) -->
<apex:outputText style="color: #ccc;" value="« Previous"
     rendered="{! NOT(HasPrevious) }"/>

&nbsp;&nbsp;  

<!-- Next page -->
<!-- active -->
<apex:commandLink action="{! Next }" value="Next »"
     rendered="{! HasNext }"/>
<!-- inactive (no more pages) -->
<apex:outputText style="color: #ccc;" value="Next »"
     rendered="{! NOT(HasNext) }"/>
        <!-- Next page -->
    </td>
    
    <td align="right">
        <!-- Records per page -->
        Records per page:
<apex:selectList value="{! PageSize }" size="1">
    <apex:selectOption itemValue="5" itemLabel="5"/>
    <apex:selectOption itemValue="20" itemLabel="20"/>
    <apex:actionSupport event="onchange" reRender="contacts_list"/>
</apex:selectList>
    </td>

</tr></table>
            

        </apex:pageBlock>

    </apex:form>

</apex:page>