Wrapper Class In Salesforce -Explained with Live Example

Before explaining what is wrapper class , lets discuss what is a Custom Object in Salesforce ?
Simplest Definition of a Custom Object would be - "Custom Object is a collection of Custom Fields which can be of Different Data Types".

Similarly you can assume a Wrapper Class as a collection of Several Data Types.

Now lets take an example to understand Wrapper Class. One of the most commonly asked questions , "How can I display a table of records with a check box and then process only the records that are selected?

Lets Say the Table to be displayed is Account table. Now If we clearly Observe the question asked , it requires two things in a list to be displayed , Can you guess them ?
1) Record of Account Table
2) Checkbox to select that record.

As we already mentioned that a wrapper class is a collection of Data types, lets go ahead and create a Wrapper class with variable to hold Account record and another to hold Boolean value for a check box.

Copy and Paste the below Codes:
Apex Controller

public class WOS_WrapperExample
{
public List<accountwrap> accountList{get;set;}
public List<Account> selectedAccounts {get;set;}
    
  public WOS_WrapperExample() {
  accountList = new list<accountwrap>();
  selectedAccounts= new list<account>();
   for(Account a : [select Id, Name, AccountNumber, Phone from Account limit 10])
      accountList.add(new accountwrap(a));  // Generating the list of Wrapper
  }
  
   

    public PageReference Selectedacc()
    {
        selectedAccounts.clear();
        for(accountwrap accwrapper : accountList)
        if(accwrapper.selected == true)
        selectedAccounts.add(accwrapper.acc);
        return null;
    }

    

    public class accountwrap
    { // Wrapper Class with two variables
        public Account acc{get; set;} 
        public Boolean selected {get; set;}
        public accountwrap(Account a) // Constructor of wrapper class
        {
            acc = a;
            selected = false;
        }
    }
}

Visualforce Page :

<apex:page Tabstyle="Account" controller="WOS_WrapperExample">
 <apex:form >
    <div style="float:left;margin: 10px;">
    <h1>Account list</h1>
        <table>
          <tr>
              <th>Select</th>
              <th>Account Name</th>
              <th>Phone</th>  
          </tr>
            <apex:repeat value="{!accountList}" var="a">
              <tr>
                  <td><apex:inputCheckbox value="{!a.selected}" id="checkedone" /></td>
                  <td>{!a.acc.Name}</td>
                  <td>{!a.acc.phone}</td> 
              </tr>  
            </apex:repeat>
        </table>        
    </div> 
    
    <div style="float:left;margin: 10px;">
        <h1>For Selected Account List Click <apex:commandButton value="Get Selected" action="{!Selectedacc}" reRender="selAcc"/></h1>
            <apex:outputPanel id="selAcc">
                  <table>
                      <tr>
                          <th>Account Name</th>
                          <th>Phone</th>  
                      </tr>
                        <apex:repeat value="{!selectedAccounts}" var="a">
                          <tr>
                              <td>{!a.Name}</td>
                              <td>{!a.phone}</td> 
                          </tr>  
                        </apex:repeat>
                    </table>
            </apex:outputPanel>
    </div>
 </apex:form>   
</apex:page>