Saturday, 26 July 2014

Select All CheckBox using Jquery in visualforce page

We have many requirements to have "Select All " records in visualforce page. We can achieve this through the javascript and Jquery.

If we choose jquery we can reduce the lines of code in javascript and we can easily get the functionality.

<apex:page controller="MassUpdateAllcls" sidebar="false">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#parentCheck").click(function() {
                $(".childCheck").prop('checked', this.checked);
                
            });
            $(".childCheck").click(function(){
                if ($('input.childCheck[type=checkbox]:not(:checked)').length){
                    $("#parentCheck").removeAttr('checked');    
                }else{
                    $("#parentCheck").prop('checked',true);
                }
            });
        })
    </script>
      <apex:form >
          <apex:pageBlock >
              <apex:pageBlockTable value="{!accountWrapperList}" var="actWrap">
                  <apex:column >
                      <apex:facet name="header">
                         <input type="checkbox" id="parentCheck"/>
                      </apex:facet>
                      <apex:inputCheckbox value="{!actWrap.isSelect}" styleClass="childCheck"/>
                  </apex:column>
                  <apex:column headerValue="Account Name" value="{!actWrap.actobj.Name}"/>
              </apex:pageBlockTable>
          
          </apex:pageBlock>
      </apex:form>
</apex:page>

Output:
====

No comments:

Post a Comment