Monday, January 2, 2017

How to select all check boxes in visual force page using Jquery class attribute

If you want to select all records in a table we can do it very simply by using tag name but there are some situations where we have 4 tables and clicking on All check box in one table should select only the records related to that table not the all table records.

To achieve that we need to have a unique identifier for each table record but unfortunately in sales force Id of any vf tag can't be a dynamic so we can't use ID here .There is one more attribute called 'styleclass' in visual force tags which can be a dynamic.Now we are using this class attribute to differentiate the table records and we will use jQuery to achieve this functionality.

Sample code snippet:

<apex:repeat value="{!listSer}" var="sr">
  <apex:pageBlockTable value="{!listWrapCase}" var="caseWrap" id="pgbId">
                          
   <apex:column >
     <apex:facet name="header" >
       <input type="checkbox" onclick="selectAllCheckboxes(this,'{!sr}chbxId')"/>
    </apex:facet>
  
   <apex:outputPanel >
     <apex:inputCheckbox value="{!caseWrap.isSelect}" styleClass="{!sr}chbxId"/>
   </apex:outputPanel>
  </apex:column>  
  
  <apex:column >
    <apex:facet name="header" >CaseId</apex:facet> 
    <apex:outputLabel value="{!caseWrap.cs.CaseNumber}" />
 </apex:column>
   
 </apex:pageBlockTable>
</apex:repeat>

Jquery snippet:


<script type="text/javascript">  
     
      function selectAllCheckboxes(obj,receivedInputclass){
      
        $('.'+receivedInputclass).trigger('click');
      }
</script>


Thank you!

No comments: