Wrapper Class in Salesforce | Select All Java Script | Add to Grid

Problem :- 
How can I display a table of records with a check box and then process only the records that are selected?

Solution:- 
Wrapper class.

A wrapper or container class is a class, data structure, or an abstract data type whose instances are a collections of other objects.It is a custom object defined by Salesforce developer where he defines the properties of the wrapper class. Within Apex & Visualforce this can be extremely helpful to achieve many business scenarios within the Salesforce CRM software.

Using Wrapper classes we can have the ability to check few records from the displayed list and process them for some action

public with sharing class WrapperDemoController {
   
    public List<AccountWrapper> listAccountWrapper {get; set;}
    public List<Account> selectedAccounts{get;set;}

    public WrapperDemoController ()
    {
            listAccountWrapper = new List<AccountWrapper>();
            searchRecord();
    }
   
    public void searchRecord()
    {
        listAccountWrapper.clear();
            for(Account a: [select Id, Name,BillingState, Website, Phone ,Active__c from Account limit 10])
            {
                listAccountWrapper.add(new AccountWrapper(a));
            }
    }

    public void processSelected()
    {
        selectedAccounts = new List<Account>();
        selectedAccounts.clear();
        for(AccountWrapper wrapAccountObj : listAccountWrapper)
        {
            if(wrapAccountObj.selected == true)
            {
                selectedAccounts.add(wrapAccountObj.acc);
            }
        }
    }

    public void ActivateData()
    {
        for(Account acc : selectedAccounts )
        {
            acc.Active__c ='Yes';
        }
        update selectedAccounts ;
        searchRecord();
    }

    public void DeActivateData()
    {
        for(Account acc : selectedAccounts )
        {
            acc.Active__c ='No';
        }
        update selectedAccounts ;
        searchRecord();
    }
   


    // This is our wrapper/container class.
    public class AccountWrapper
    {
        public Account acc {get; set;}
        public Boolean selected {get; set;}
        public AccountWrapper(Account a)
        {
            acc = a;
            selected = false;
        }
    }

}

Page

<apex:page controller="WrapperDemoController">
    <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 id="PB1">
            <apex:pageBlockButtons >
                <apex:commandButton value="Add to Grid" action="{!processSelected}" rerender="table2,PB2"/>
            </apex:pageBlockButtons>

            <apex:pageblockSection title="All Accounts" collapsible="false" columns="1">
                <apex:pageBlockTable value="{!listAccountWrapper}" 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:column value="{!accWrap.acc.Active__c}" />
                </apex:pageBlockTable>


            </apex:pageblockSection>
        </apex:pageBlock>
       
        <apex:pageBlock id="PB2" >
            <apex:pageBlockButtons >
                <apex:commandButton value="Activate" action="{!ActivateData}" rerender="PB1,PB2"/>
                <apex:commandButton value="DeActivate" action="{!DeActivateData}" rerender="PB1,PB2"/>
            </apex:pageBlockButtons>

                <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                    <apex:column value="{!c.Name}" headerValue="Account Name"/>
                    <apex:column value="{!c.BillingState}" headerValue="Billing State"/>
                    <apex:column value="{!c.Phone}" headerValue="Phone"/>
                    <apex:column value="{!c.Active__c}" headerValue="Active"/>
                </apex:pageBlockTable>
        </apex:pageBlock>

       
    </apex:form>
</apex:page>

Some Other useful like :-
1) https://developer.salesforce.com/page/Wrapper_Class

Thanks
Amit Chaudhary