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>

jQuery Syntax?

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

Ready Event in jQuery?

Ready Event in jQuery is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready, before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

Events in jQuery?

$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully loaded.

click()
The function is executed when the user clicks on the HTML element.

dblclick()
The function is executed when the user double-clicks on the HTML element:

mouseenter()
The function is executed when the mouse pointer enters the HTML element:

mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:
  
mousedown()
The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element:
  
mouseup()
The function is executed, when the left mouse button is released, while the mouse is over the HTML element:

hover()
The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element.

focus()
The function is executed when the form field gets focus.

blur()
The function is executed when the form field loses focus.

jQuery Fading Methods?

jQuery has the following fade methods:

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

---

jQuery fadeIn()

The jQuery fadeIn() method is used to fade in a hidden element.

Syntax:

$(selector).fadeIn(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the fading completes.
The following example demonstrates the fadeIn() method with different parameters:

---

jQuery fadeOut()

The jQuery fadeOut() method is used to fade out a visible element.

Syntax:

$(selector).fadeOut(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the fading completes.
The following example demonstrates the fadeOut() method with different parameters:

---

jQuery fadeToggle()

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out. 

Syntax:

$(selector).fadeToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the fading completes.
The following example demonstrates the fadeToggle() method with different parameters:

---

jQuery fadeTo()

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
The optional callback parameter is the name of a function to be executed after the function completes.

jQuery Sliding Methods

jQuery Sliding Methods

With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:

• slideDown()
• slideUp()
• slideToggle()

---

jQuery slideDown() Method

The jQuery slideDown() method is used to slide down an element.

Syntax:

$(selector).slideDown(speed,callback);

 

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the sliding completes.
The following example demonstrates the slideDown() method:

Example

$("#flip").click(function(){
  $("#panel").slideDown();
});

---

jQuery slideUp() Method

The jQuery slideUp() method is used to slide up an element.

Syntax:

$(selector).slideUp(speed,callback);

 

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of a function to be executed after the sliding completes.
The following example demonstrates the slideUp() method:

Example

$("#flip").click(function(){
  $("#panel").slideUp();
});

---

jQuery slideToggle() Method

The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements are slide down, slideToggle() will slide them up.
If the elements are slide up, slideToggle() will slide them down. 

$(selector).slideToggle(speed,callback);

 

The optional speed parameter can take the following values: "slow", "fast", milliseconds.
The optional callback parameter is the name of a function to be executed after the sliding completes.

The following example demonstrates the slideToggle() method:

Example

$("#flip").click(function(){
  $("#panel").slideToggle();
});