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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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