Feb 08

actionfunction visualforce salesforce

actionfunction visualforce salesforce

actionfunction component provides support for invoking controller action methods directly from JavaScript code using an AJAX request.

It is different from actionsupport which only provides support for invoking controller action methods from other Visualforce components, actionfunction defines a new JavaScript function which can then be called from JavaScript code.

Click for Demo

In the example below, we are showing one picklist with name customer priority. Whenever we will change customer , then javascript method will be called. And we have specified corresponding controller action method in actionfunction component method. In controller method we are checking if customer priority is high then we are setting boolean variable as true. So phone textbox will be rendered automatically without refreshing full page

Visualforce Code:

<apex:page controller="actionFunctionController" tabStyle="Account">
    <apex:form >
        <apex:actionFunction name="priorityChangedJavaScript" action="{!priorityChanged}" rerender="out"/>
        <apex:pageBlock >
            <apex:pageBlockSection title="If you will select High Customer Priority then phone textbox will be shown" columns="1" id="out" collapsible="false">
                <apex:inputField value="{!acc.CustomerPriority__c}" onchange="priorityChangedJavaScript()"/>
                <apex:inputField value="{!acc.Phone}" rendered="{!showPhone}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public class actionFunctionController {
    public Account acc{get;set;}
    public Boolean showPhone{get;set;}

    public actionFunctionController(){
        acc = new Account();
        showPhone = false;
    }

    public PageReference priorityChanged(){
        if(acc.CustomerPriority__c == 'High'){
            showPhone = true;
        }
        else{
            showPhone = false;
        }
        return null;
    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/actionfunction-visualforce-salesforce/

Feb 07

Salesforce record Id 15 digit 18 digit conversion

Salesforce record Id 15 digit to 18 digit

Salesforce record Id uniquely identifies each record in salesforcce. Salesforce record Id can either be 15 digit or 18 digit. 15 digit salesforce record  id is case sensitive and 18 digit salesforce record id is case insensitive. Every record in salesforce is identified by unique record Id in every salesforce organization.

  • 15 digit case-sensitive version is referenced in the UI and also visible in browser
  • 18 digit case-insensitive version which is referenced through the API

The last 3 digits of the 18 digit Id is a checksum of the capitalization of the first 15 characters, this Id length was created as a workaround to legacy system which were not compatible with case-sensitive Ids. The API will accept the 15 digit Id as input but will always return the 18 digit Id.
In this post I will explain the process to convert 15 digit salesforce Id to 18 digit salesforce Id.

Click for Demo

Visualforce Code:

<apex:page controller="idConvertor">
    <apex:form >
        <apex:pageBlock >
        <apex:pageMessages id="showmsg"></apex:pageMessages>
            <apex:pageBlockButtons >
                <apex:commandButton value="Convert" action="{!convert}"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection >
            <apex:inputText value="{!inputId}" label="Input Id:"/>
            <apex:outPutText value="{!outputId}" label="Output Id:"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public with sharing class idConvertor {
    public String inputId{get;set;}
    public String outputId{get;set;}

    public PageReference convert(){
        outputId = convertId(inputId);
        return null;
    }

    String convertId(String inputId){
        string suffix = '';
        integer flags;
        try{
            for (integer i = 0; i < 3; i++) {
                flags = 0;
                for (integer j = 0; j < 5; j++) {
                    string c = inputId.substring(i * 5 + j,i * 5 + j + 1);
                    if (c.toUpperCase().equals(c) && c >= 'A' && c <= 'Z') {
                        flags = flags + (1 << j);
                    }
                }
                if (flags <= 25) {
                    suffix += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.substring(flags,flags+1);
                }else{
                    suffix += '012345'.substring(flags - 26, flags-25);
                }
            }
        }
        catch(Exception exc){
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,'Please enter Valid 15 digit Id'));
        }
        String outputId = inputId+suffix;
        return outputId;
    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/salesforce-id-15-digit-18-digit-conversion/

Feb 07

actionstatus visualforce salesforce

actionStatus visualforce salesforce

actionStatus visualforce component displays the status of an AJAX update request. An AJAX request can either be in progress or complete.

Depending upon the AJAX request status (whether AJAX request is in progress or complete), this component will display different message to user. In many scenarios AJAX request takes some time. So we should display some message to user that your request is in progress. Once request is complete, we can display some different message to user.

Using actionstatus, we can also display some gif (graphic Interchange Format), which shows to user that their request is in progress. It gives very good presentation to end user.

In the example below, we are using actionSupport component for AJAX request. You can see my previous post to know more about actionsupport component. In this example we are showing some text message to user while AJAX request is in progress using actionstatus component. It shows some different message once request is complete.

When user will click on ‘Click here for increment’ or ‘Click here for decrement’, then count will be incremented or decremented accordingly. Also when request is in progress, message will be shown to user.

Click for Demo

Visualforce Code:

<apex:page controller="actionSupportController">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:outputpanel id="panel1">
                    <apex:outputText value="Click here to increment!"/>
                    <apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="out" status="counterStatus"/>
                    <apex:actionStatus id="counterStatus" startText=" (incrementing...)" stopText=" (done)"/>
                </apex:outputpanel>

                <apex:outputpanel id="panel2">
                    <apex:outputText value="Click here to decrement!"/>
                    <apex:actionSupport event="onclick" action="{!decrementCounter}" rerender="out" status="counterStatus2"/>
                    <apex:actionStatus id="counterStatus2" startText=" (decrementing...)" stopText=" (done)"/>
                </apex:outputpanel>

                <apex:outputText value="{!count}" id="out" label="Count Is:"/>

            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public class actionSupportController {
    Integer count = 0;

    public PageReference incrementCounter() {
            count++;
            return null;
    }

    public PageReference decrementCounter() {
            count--;
            return null;
    }

    public Integer getCount() {
        return count;
    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/actionstatus-visualforce-salesforce/

Feb 07

Actionsupport in visualforce in salesforce

actionsupport in visualforce

actionSupport component adds AJAX support to other components in visualforce. It allows components to be refreshed asynchronously by calling the controller’s method when any event occurs (like click on button). It allows us to do partial page refresh asynchronously without refreshing  full page.

In the example below, initially count value is set to 0. But when we will click on ‘Click here to increment! ‘, then controller action method will be called and count will be incremented. Also outputText component will be rendered without refreshing complete page.

Similarly when we will click on ‘Click here to decrement!’, then controller action method will be called and count will be decremented. Also outputText component will be rendered without refreshing complete page.

apex:actionSupport has following attributes in our example:

  • action: action attribute specifies the controllers action method that will be invoked when event occurs.
  • event: It is DOM event that generates AJAX request
  • reRender: It is comma separated id’s of components that needs to be partially refreshed. In our example, we have given its value as ‘out’. So component with ‘out’ id will be refreshed without refreshing complete page.

Click for Demo

Visuaforce Code:


<apex:page controller="actionSupportController">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:outputpanel id="panel1">
                    <apex:outputText value="Click here to increment!"/>
                    <apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="out"/>
                </apex:outputpanel>

                <apex:outputpanel id="panel2">
                    <apex:outputText value="Click here to decrement!"/>
                    <apex:actionSupport event="onclick" action="{!decrementCounter}" rerender="out"/>
                </apex:outputpanel>

                <apex:outputText value="{!count}" id="out" label="Count Is:"/>

            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public class actionSupportController {
    Integer count = 0;

    public PageReference incrementCounter() {
            count++;
            return null;
    }

    public PageReference decrementCounter() {
            count--;
            return null;
    }

    public Integer getCount() {
        return count;
    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/actionsupport-visualforce-salesforce/

Feb 04

Export to Excel with multiple worksheets in visualforce

Export to Excel with multiple worksheets in visualforce

We need to use XML tags to get the excel with multiple worksheets. We can use visualforce tags also with XML tags. We can use Styles like color , size , height for formatting the cells of excel sheet. For XML spreadsheet reference, go to
XML Spreadsheet Reference

Click for Demo

Below is the Visualforce page code that will list all Accounts and Contacts. There is a button that will export all these accounts and contacts to excel sheet with two worksheets.

<apex:page controller="ExportToExcelMultipleSheets">
<apex:form >
<apex:pageBlock title="Accounts and Contacts">

<apex:pageBlockButtons >
<apex:commandbutton value="Export All Accounts and Contacts" action="{!exportAll}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection columns="2">
<apex:pageBlockSectionItem >
<apex:pageBlockTable title="All Accounts" value="{!accountList}" var="account">
<apex:facet name="caption" ><b>All Accounts</b></apex:facet>
<apex:column value="{!account.name}"/>
</apex:pageBlockTable>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:pageBlockTable title="All Contacts" value="{!contactList}" var="contact">
<apex:facet name="caption" ><b>All Contacts</b></apex:facet>
<apex:column value="{!contact.name}"/>
<apex:column value="{!contact.email}"/>
<apex:column value="{!contact.account.name}"/>

</apex:pageBlockTable>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Below is the Visualforce page code that will generate excel file.

<apex:page controller="ExportToExcelMultipleSheets" contentType="txt/xml#myTest.xls" cache="true">
<apex:outputText value="{!xlsHeader}"/>
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns:x="urn:schemas-microsoft-com:office:excel"
 xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:html="http://www.w3.org/TR/REC-html40">
 <Styles>
 <Style ss:ID="s1">
 <Alignment/>
 <Borders/>
 <Font ss:Bold="1"/>
 <Interior/>
 <NumberFormat/>
 <Protection/>
 </Style>
 </Styles>
 <Worksheet ss:Name="Accounts">
 <Table x:FullColumns="1" x:FullRows="1">
 <Column ss:Width="170"/>
 <Row>
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Account Name</Data></Cell>
 </Row>
 <apex:repeat value="{!accountList}" var="account">
 <Row>
 <Cell><Data ss:Type="String">{!account.name}</Data></Cell>
 </Row>
 </apex:repeat>
 </Table>
 </Worksheet>
 <Worksheet ss:Name="Contacts">
 <Table x:FullColumns="1" x:FullRows="1">
 <Column ss:Width="170"/>
 <Column ss:Width="280"/>
 <Column ss:Width="330"/>
 <Row>
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Contact Name</Data></Cell>
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Email</Data></Cell>
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Account Name</Data></Cell>
 </Row>
 <apex:repeat value="{!contactList}" var="contact">
 <Row>
 <Cell><Data ss:Type="String">{!contact.name}</Data></Cell>
 <Cell><Data ss:Type="String">{!contact.email}</Data></Cell>
 <Cell><Data ss:Type="String">{!contact.account.name}</Data></Cell>
 </Row>
 </apex:repeat>
 </Table>
 </Worksheet>
</Workbook>
</apex:page>

Below controller is used by both the visualforce pages: 


public with sharing class ExportToExcelMultipleSheets {
public List<Account> accountList{get;set;}
public List<Contact> contactList{get;set;}
public String xlsHeader {
        get {
            String strHeader = '';
            strHeader += '<?xml version="1.0"?>';
            strHeader += '<?mso-application progid="Excel.Sheet"?>';
            return strHeader;
        }
    }

public ExportToExcelMultipleSheets(){
    accountList = [select id, name from Account LIMIT 50];
    contactList = [Select id, name, account.name, email from Contact LIMIT 50];

}

public Pagereference exportAll(){
    return new Pagereference('/apex/exportAll');


}

}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/export-excel-multiple-worksheets-visualforce/

Feb 04

Show error message in Visualforce Page

Show error message in Visualforce Page using ApexPages.addmessage

Sometime we need to show error message on Visualforce page. We can implement this requirement by creating new instance of ApexPages.message and then adding message to Apexpages using ApexPages.addmessage. Then displaying these messages in visualforce page.

We can add 5 different types of message in Visualforce Page. In the example below, we are showing 5 input fields of account. We have added a button on visualforce page. Different type of message will be shown on visualforce page if we will keep any field blank.

Click for Demo

Error Message

Visualforce Code:

<apex:page standardController="Account" extensions="ErrorMessageInVfController">
 <apex:form >
   <apex:pageblock >
      <apex:pageMessages id="showmsg"></apex:pageMessages>
         <apex:panelGrid columns="2">
           Account Name: <apex:inputText value="{!acc.name}"/>
           Account Number: <apex:inputText value="{!acc.AccountNumber}"/>
           Account Phone: <apex:inputText value="{!acc.phone}"/>
           Account Site: <apex:inputText value="{!acc.site}"/>
           Account Industry: <apex:inputText value="{!acc.industry}"/>
           <apex:commandButton value="Update" action="{!save}" style="width:90px" rerender="showmsg"/>
         </apex:panelGrid>
    </apex:pageblock>
 </apex:form>
</apex:page>

Apex Code:

public with sharing class ErrorMessageInVfController {
    public Account acc{get;set;}
    public ErrorMessageInVfController(ApexPages.StandardController controller) {
        acc = new Account();
    }

    public void save(){
      if(acc.name == '' || acc.name == null)
       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.FATAL,'Please enter Account name'));

      if(acc.AccountNumber == '' || acc.AccountNumber == null)
       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,'Please enter Account number'));

      if(acc.phone == '' || acc.phone == null)
       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.WARNING,'Please enter Account phone'));

      if(acc.site == '' || acc.site == null)
       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.INFO,'Please enter Account site'));

      if(acc.industry == '' || acc.industry == null)
       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Please enter Account industry'));

    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/show-error-message-visualforce-page/

Feb 03

Export to Excel using VisualForce Page

Export to Excel using VisualForce Page

By simply modifying the ContentType attribute on the <apex:page> tag, your Visualforce page code will automatically generate an Excel document. For example, the following code will create a table of Contact data for a given Account. After # in the contentType attribute value, it is the name of the excel file that will be generated and you also need to mention the file extension like .xls . For successfully running the below code you need to provide the valid account id in URL. Below is the link for Demo:

Click for Demo

Visualforce Code:

<apex:page standardController="Account" contenttype="application/vnd.ms-excel#Demo Example.xls">
<apex:pageBlock title="Hello {!$User.FirstName}!">
You are viewing the {!account.name} account.
</apex:pageBlock>
<apex:pageBlock title="Contacts">
<apex:pageBlockTable value="{!account.Contacts}" var="contact">
<apex:column value="{!contact.Name}"/>
<apex:column value="{!contact.Email}"/>
<apex:column value="{!contact.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

Permanent link to this article: http://www.sfdcpoint.com/salesforce/export-excel-using-visualforce-page/

Feb 03

Dynamic SOQL query to fetch all fields in Salesforce

Dynamic SOQL query Salesforce

SOQL is Salesforce Object Query Language for querying data in the Force.com platform. It is very much similar to SQL.

But in SOQL, we can not query all fields from object. This statement is not allowed in SOQL:

select * from Account;

But there is one trick to query all fields of Object in SOQL query.

In the example below, we will use SOQL query to fetch all fields of account. We have added one ‘Fetch Account’ button on page. When we will click on this button all fields of account objects are fetched using SOQL query. We have also shown SOQL query in Visualforce page result.

Click for Demo

Visualforce Code:

<apex:page controller="selectAllSOQLExampleController" tabStyle="Account">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="Fetch Accounts" action="{!fetch}"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection columns="1" title="Dynamic SOQL Query" collapsible="false">
                <apex:outputText value="{!query}">
                </apex:outputText>
            </apex:pageBlockSection>

            <apex:pageBlockSection title="Account table" columns="1" collapsible="false">
                <apex:pageBlockTable value="{!accList}" var="acc">
                    <apex:column value="{!acc.name}"/>
                    <apex:column value="{!acc.phone}"/>
                    <apex:column value="{!acc.rating}"/>
                    <apex:column value="{!acc.industry}"/>
                    <apex:column value="{!acc.accountnumber}"/>
                </apex:pageBlockTable>

            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public class selectAllSOQLExampleController {
    public List<Account> accList{get;set;}
    public String query{get;set;}
    public selectAllSOQLExampleController(){
    }
    public PageReference fetch(){
        String SobjectApiName = 'Account';
        Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
        Map<String, Schema.SObjectField> fieldMap = schemaMap.get(SobjectApiName).getDescribe().fields.getMap();

        String commaSepratedFields = '';
        for(String fieldName : fieldMap.keyset()){
            if(commaSepratedFields == null || commaSepratedFields == ''){
                commaSepratedFields = fieldName;
            }else{
                commaSepratedFields = commaSepratedFields + ', ' + fieldName;
            }
        }

        query = 'select ' + commaSepratedFields + ' from ' + SobjectApiName + ' Limit 5';

        accList = Database.query(query);

        return null;
    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/dynamic-soql-query-fetch-fields-object-salesforce/

Feb 02

Wrapper Class in Apex Salesforce

Wrapper class in Apex Salesforce

A wrapper or container class is a class, a data structure, or an abstract data type which contains different objects or collection of objects as its members.
A wrapper class is a custom object defined by programmer wherein he defines the wrapper class properties. Consider a custom object in salesforce, what do you have in it? fields right? different fields of different data types. Similarly wrapper class is a custom class which has different data types or properties as per requirement. We can wrap different objects types or any other types in a wrapper class.

In the Visualforce most important use case is to display a table of records with a check box and then process only the records that are selected.

In the example below, we are displaying list of accounts with checkbox. End user can select account and then click on Show Selected accounts button. Then selected account will be displayed in table.

Click for Demo

Wrapper Class in Apex Example

Visualforce Code:

<apex:page controller="AccountSelectClassController" sidebar="false">
    <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:pageBlockButtons >
                <apex:commandButton value="Show Selected Accounts" action="{!processSelected}" rerender="table2"/>
            </apex:pageBlockButtons>

            <apex:pageblockSection title="All Accounts" collapsible="false" columns="2">

                <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>

                <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:pageBlockTable>

            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>

</apex:page>

Apex Class Controller:

public class AccountSelectClassController{

    //Our collection of the class/wrapper objects wrapAccount
    public List<wrapAccount> wrapAccountList {get; set;}
    public List<Account> selectedAccounts{get;set;}

    public AccountSelectClassController(){
        if(wrapAccountList == null) {
            wrapAccountList = new List<wrapAccount>();
            for(Account a: [select Id, Name,BillingState, Website, Phone from Account limit 10]) {
                // As each Account is processed we create a new wrapAccount object and add it to the wrapAccountList
                wrapAccountList.add(new wrapAccount(a));
            }
        }
    }

    public void processSelected() {
    selectedAccounts = new List<Account>();

        for(wrapAccount wrapAccountObj : wrapAccountList) {
            if(wrapAccountObj.selected == true) {
                selectedAccounts.add(wrapAccountObj.acc);
            }
        }
    }

    // This is our wrapper/container class. In this example a wrapper class contains both the standard salesforce object Account and a Boolean value
    public class wrapAccount {
        public Account acc {get; set;}
        public Boolean selected {get; set;}

        public wrapAccount(Account a) {
            acc = a;
            selected = false;
        }
    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/wrapper-class-in-apex/

Feb 02

Select all checkbox using javascript in visualforce page

Select all checkbox using javascript in visualforce page

Javascript can be used in visualforce pages to select all checkboxes in visualforce table. This example uses javascript to implement this functionality.

Click for demo

Visualforce Page:


<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>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Class Code:


public class CheckAllUsingJavascriptController {
    public List<wrapAccount> wrapAccountList {get; set;}
    
    public CheckAllUsingJavascriptController(){
        if(wrapAccountList == null) {
            wrapAccountList = new List<wrapAccount>();
            for(Account a: [select Id, Name,BillingState, Website, Phone from Account limit 10]) {
                // As each Account is processed we create a new wrapAccount object and add it to the wrapAccountList
                wrapAccountList.add(new wrapAccount(a));
            }
        }
    }
    
    public class wrapAccount {
        public Account acc {get; set;}
        public Boolean selected {get; set;}

        //This is the contructor method. When we create a new wrapAccount object we pass a Account that is set to the acc property. We also set the selected value to false
        public wrapAccount(Account a) {
            acc = a;
            selected = false;
        }
    }
}

Permanent link to this article: http://www.sfdcpoint.com/salesforce/select-all-checkbox-using-javascript-in-visualforce-page/