Ads

Sunday 21 July 2013

Javascript to select all checkboxes in visualforce page?

I needed to develop a custom visualForce page which would hold a page block table which would contain a checkbox and details of a custom object based on which user can select and click on buttons to perform some operations.

I wrapped the custom object record and check box in a wrapper class. I needed a simple functionality when the header checkbox is selected or deselected accordingly all the checkbox will get selected or deselected accordingly. So i looked into community and first result community gave is this(controller way). It involved calls to back end and as a result functionality is little slow.

So I went for a Javascript solution which would provide a faster,elegant and much simpler way.Here is the VF code which was used in the page above.
<apex:pageBlockTable value="{!wrapreportsobj }" var="w" id="Selected_PBS">
<apex:column ><apex:facet name="header">
<apex:inputCheckbox onclick="checkAll(this,'checkedone')"/>
</apex:facet>
<apex:inputCheckbox value="{!w.selected}" id="checkedone"/></apex:column>
<apex:column ><apex:facet name="header">Id</apex:facet><apex:outputfield value="{!w.rep.id}"/></apex:column>
<apex:column ><apex:facet name="header">Name</apex:facet><apex:outputfield value="{!w.rep.name}"/></apex:column>
</apex:pageBlockTable>

Note that I have set the id of the checkbox as checkedone and while clicking on header checkbox it calls a javascript function  checkAll. Giving an id will segregate all the checkboxes in the table. Here is the javascript which would handle the selecting and deselecting all of the checkboxes which has id checkedone in it.

<script type="text/javascript">
    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;
                }
            }
        }
</script>

6 comments:

  1. good clarificcatiuon.Can you tel me when check header check box true then only record will be created in custom objects.can you tel me how to achieve this?

    ReplyDelete
  2. can you please explain the javascript code in depth?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. in javascript first list of all html elements having tag name 'input' is created. later in if condition its checking html id of the element contains id we given to our checkbox to be operated. if true check box value is update to the value of header checkbox using inputElem[i].checked = cb.checked;

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Try this one, select all checkboxes in a row after checked checkbox, http://justwebcode.blogspot.com/2017/07/select-all-checkboxes-in-a-row-following-checked-checkbox.html

    ReplyDelete