Checkbox in DataTable

Displaying the check box in a data table or page block table is a general requirement in every project. with the help of wrapper class we can display the checkboxes in a data table. For the select all checkbox we need to add small javascript so that if we select the header checkbox it will select all the checkboxes.
Apex Class:

public class Checkbox_Class  { 
    List<accountwrapper> accountList = new List<accountwrapper>();
    List<Account> selectedAccounts = new List<Account>();       
    public List<accountwrapper> getAccounts()  {
        for(Account a: [select Id, Name, AccountNumber, Phone from Account limit 5])
        accountList.add(new accountwrapper(a));
        return accountList;
    }
   
    public PageReference getSelected()   {
        selectedAccounts.clear();
        for(accountwrapper accwrapper: accountList)
        if(accwrapper.selected == true)
        selectedAccounts.add(accwrapper.acc);
        return null;
    }
   
    public List<Account> GetSelectedAccounts()  {
        if(selectedAccounts.size()>0)
        return selectedAccounts;
        else
        return null;
    }  
   
    public class accountwrapper  {
        public Account acc{get; set;}
        public Boolean selected {get; set;}
        public accountwrapper(Account a)
        {
            acc = a;
            selected = false;
        }
    }
}

VisualForce Page:
<apex:page controller="Checkbox_Class" Tabstyle="Account">
<apex:form >
<apex:pageBlock Title="Accounts with CheckBoxes">
<apex:pageBlockSection Title="List of Available Accounts">
<apex:dataTable value="{!accounts}" var="a" columnswidth="50px,50px" cellpadding="4" border="1">
<apex:column >
<apex:facet name="header"> <apex:inputCheckbox >
<apex:actionSupport event="onclick" action="{!GetSelected}" onsubmit="checkAll(this)" rerender="Selected_PBS"/>
</apex:inputCheckbox></apex:facet>
<apex:inputCheckbox value="{!a.selected}" id="checkedone">
<apex:actionSupport event="onclick" action="{!GetSelected}" rerender="Selected_PBS"/>
</apex:inputCheckbox></apex:column>
<apex:column headervalue="Account Name" value="{!a.acc.Name}" />
<apex:column headervalue="Account Number" value="{!a.acc.AccountNumber}" />
<apex:column headervalue="Phone" value="{!a.acc.Phone}" />
</apex:dataTable>
</apex:pageBlockSection>
<apex:pageBlockSection Title="Selected Accounts" id="Selected_PBS">
<apex:dataTable value="{!SelectedAccounts}" var="s" columnswidth="50px,50px" cellpadding="4" border="1">
<apex:column headervalue="Account Name" value="{!s.Name}" />
<apex:column headervalue="Account Number" value="{!s.AccountNumber}" />
<apex:column headervalue="Phone" value="{!s.Phone}" />
</apex:dataTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
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:page>

Demo : https://sfdevforce-developer-edition.na12.force.com/vfCheckbox