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: https://www.sfdcpoint.com/salesforce/select-all-checkbox-using-javascript-in-visualforce-page/

16 comments

Skip to comment form

    • kapil p on February 24, 2014 at 2:45 pm
    • Reply

    Nice One

      • Rastogi Anand on February 25, 2014 at 8:45 pm
      • Reply

      its not getting compiled getting error Error: CheckAllUsingJavascript Compile Error: expecting a left angle bracket, found ‘wrapAccountList’ at line 3 column 16

        • Ankush Dureja on February 25, 2014 at 9:21 pm
        • Reply

        Hi @rastogianand:disqus , Code is working fine for me. I think you have not copy pasted correctly. Can you please email me or share your code and error here. I will try to find error and will reply you.

        Thanks

          • Rastogi Anand on February 26, 2014 at 9:08 am
          • Reply

          yaar i copy the same code its saying that

          xpecting a left angle bracket, found ‘wrapAccountList’ at line 3 column 16 and can i get a test class for this code

          1. Hi Rastogi,
            I made correction in code. It was not displayed correctly in post. Please copy and paste updated code now.
            Please let me know if you still have any issue.

            Thanks for your feedback and finding mistake.

            • Rastogi Anand on February 27, 2014 at 11:50 am

            thnx can i get the test class for this and i have a question like which standard object cant be moved in production and do you have any idea abt integration concept in salesforce

            • Nitish Singhal on February 27, 2014 at 10:45 pm

            Hi Rastogi,
            Yes, we are going to post regarding test classes, migration and integration very soon. Please stay tuned. I am writing the test class that you have asked for. Will keep you posted.
            And we are also going to start the discussion forum thing very soon, where you can ask questions and our discussions can go ahead.

            • Vishnu on February 27, 2014 at 11:19 pm

            We are waiting for integration related post on REST and SOAP API’s

          2. We will post integration related posts very soon. Thanks for your feedback.

    • veeru on March 9, 2014 at 6:04 pm
    • Reply

    which standard object cant be moved in production pls tell me

    • Gyanender Singh on March 31, 2014 at 11:21 pm
    • Reply

    Such a nice code

    • Tushar Mahadik on May 21, 2014 at 10:56 am
    • Reply

    This java script is working fine in Mozilla and IE but working reverse in Google chrome….please suggest what to do……i.e. when i select all it selects all but i put action support to rendered to next. It is not working…after uncheck it show rendered values….

    function checkAll(cb,cbid)
    {
    var inputElem = document.getElementsByTagName(“input”);
    for(var i=0; i<inputElem.length; i++)
    {
    if(inputElem[i].id.indexOf(cbid)!=-1){
    inputElem[i].checked = cb.checked;
    }
    }
    }

    Select District :

    Select All

    1. Hello Tushar,
      Code you have entered in comment is not clear. I have tested my code and it is working absolutely fine in chrome browser. Can you please provide clear code so that I can try to identify your problem.

    • suresh on July 25, 2014 at 10:56 am
    • Reply

    thank you Ankush….its too good 🙂

      • suresh on July 25, 2014 at 11:53 am
      • Reply

      But how to do something similar, if the vf page is having some other table with same kind of requirement!!?
      Ex: two pageblocktables, one with Accounts, another with Contacts.

      We are using getElementsByTagName(“input”), which might not be helpful since it will pass the checkboxes from both the tables.

      I have tried with getElementsByClassName.Its working fine.
      But, i read somewhere that there wil besome browser compatibility issues.!!

      Could you pls help me with this !!?

      Thank You 🙂

      1. Hello Suresh
        You can use getElementsByClassName. I don’t think that there will be any issue. There are other solutions also.

        currently we are using this code

        Here we have inputId as id of inputcheckbox component. and in selectAllCheckboxes method we are passing inputId as second parameter. So one of the solution is that in first pageblocktable you can use inputId1 and in second table you can use inputId2 as checkbox id and 2nd parameter of method.

        Thank you 🙂

Leave a Reply

Your email address will not be published.