Visualforce Adding CheckBox as header to Select all the records in Pageblock Table

I have faced some requirement in my development work . User must be able to select all the record in the page block table in one click . So I added header check-box  in page block table . 

Here is the code how I achieved this. Only Java Script code I have used .

Page

<apex:page controller="ControllerforheaderCheckboxinPBT">

    <script type="text/javascript">

        

        function checkAll(cb){

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

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

                if(inputElem[i].id.indexOf("checkedone")!=-1)

                    inputElem[i].checked = cb.checked;

            }

        } 

     </script>

    

    <apex:pageMessages />

    <apex:form >

       <apex:pageBlock Title="ALL CONTACTS" >

            <apex:commandButton value="mass delete" action="{!massdelete}"  id="massdelete" onclick="return confirmDelete()"/>

            <apex:pageBlockTable value="{!Contacts}" width="100%" var="c" cellpadding="2" border="1"  rowClasses="odd,even" styleClass="tableClass" id="opp_table">

                <apex:column >

                    <apex:facet name="header"> 

                        <apex:inputCheckbox >

                            <apex:actionSupport event="onclick" action="{!GetSelected}" onsubmit="checkAll(this)" rerender="opp_table" status="newStatus"/>

                         </apex:inputCheckbox>

                     </apex:facet>

                    <apex:inputCheckbox value="{!c.selected}" id="checkedone">

                        <apex:actionSupport event="onclick" action="{!GetSelected}" rerender="opp_table"/>

                    </apex:inputCheckbox>

                </apex:column>

                <apex:column headervalue="AccountName" styleClass="showline">

                    <apex:outputField value="{!c.con.AccountId}" />

                </apex:column> 

            </apex:pageBlockTable>

        </apex:pageBlock>

    </apex:form>

</apex:page>

My Controller..

public with sharing class ControllerforheaderCheckboxinPBT {

     public Contact contact{get;set;}

     public Id contactId{get;set;}

     List<ContactWrapper> contactList = new List<ContactWrapper>();

     List<Contact> selectedContacts = new List<Contact>();

     public ControllerforheaderCheckboxinPBT() {

        Contact contact = new Contact();

     }    

    public  List<ContactWrapper> getContacts() {

       for(Contact c: [SELECT Id,Name,Accountid,loginURL__c,Account.Name,MobilePhone,Email FROM Contact ORDER BY createdDate DESC]){

           contactList.add(new ContactWrapper(c));

        }   

       return contactList;

    }

     public PageReference getSelected() {

         System.debug('======Inside the Get Function======');

         selectedContacts.clear();

      

         //adding contacts in list 

         for(ContactWrapper conWrapper: contactList) {

            if(conWrapper.selected == true) {

                conWrapper.isChanged = true;

                selectedContacts.add(conWrapper.con);  

            }                    

          }      

          return null;

      }

      

      public PageReference massDelete() {

          //deleting that list 

  if(selectedContacts.size()>0){

  delete selectedContacts;

  }

              

  //showing an message to select one contact

  else{

  ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Please select at least one Contact.'));

  return null;

  }

  PageReference headerCheckboxPage = new PageReference('/apex/headerCheckboxinPBT');

  headerCheckboxPage .setRedirect(true);

  return headerCheckboxPage ;

  }

     public class ContactWrapper {

         public Contact con{get; set;}

         public Boolean selected{get; set;}

          

         public ContactWrapper(Contact c) {

            con = c;

            selected = false;

              

         }

      }    

}