+ Start a Discussion

javascript issue

If the top  chekcbox in the column within <apex:facet> tags in checked , I would want to check the checkbox in that column.

So its something like check All functionality. Anything with an example would be really helpful.


Heres the code for that column in the pageBlockTable



<apex:column id="colChk">
	<apex:facet name="header">
		<apex:inputCheckbox id="chkTopCheckBox" onclick="selectCheckboxes();"/>
	<apex:inputCheckBox id="chkbox" value="{!row.selected}"/>




You shouldn't even need to write any javascript to do this:



<apex:page controller="checkboxesCon" >
      <apex:pageBlockTable value="{!objects}" var="row" id="theTable">
          <apex:facet name="header">
            <apex:inputCheckbox value="{!selection}">
              <apex:actionSupport event="onchange" action="{!selectAll}" rerender="theTable"/>
          <apex:inputCheckbox value="{!row.selected}"/>
        <apex:column headerValue="Value" value="{!row.value}"/>


public class checkboxesCon {
  public List<Wrapper> objects {get;set;}
  public boolean selection {get;set;}
  public checkboxesCon() {
    objects = new List<Wrapper>();
    objects.add(new Wrapper('one', false));
    objects.add(new Wrapper('two', false));
    objects.add(new Wrapper('three', false));
    objects.add(new Wrapper('four', false));

  public void selectAll() {
    for(Wrapper w : objects) {
      w.selected = selection;

  public class Wrapper {
    public boolean selected {get;set;}
    public String value {get;set;}
    public Wrapper(String value, boolean selected) {
      this.value = value;
      this.selected = selected;




Thanks , this is a nice approach but there seems to be a minor delay in checking and unchecking the boxes (maybe cause its calling the actionsupprt and then redering as compared to the client side javascript which renders instantly) .


Also if I select them and then go to some other page in salesforce and then return back using the browser's (Chrome) back button , I am getting some finicky behaviour . But as soon as I refresh that page it works fine.





Hey Abak


Can you use jQuery in your page? , its a javascript library that can make this a walk in the park.


You can use jQuery to go through all input type checkboxes and mark them.


in your code:


<div id="myCheckboxes">
    <apex:column id="colChk">
	<apex:facet name="header">
             <apex:inputCheckbox id="chkTopCheckBox" 
	<apex:inputCheckBox id="chkbox" value="{!row.selected}"/>



I tend to use a div wrapped around what i need, so its easier and cleaner code than using {!component.XYZ}.

The jQuery code would look something like this :



$("#myCheckboxes input:checkbox").attr("checked","checked"); 

This will set the attribute "checked" to "checked" , i think this was // the standards accepted value isntead of true, but dont remember now with jQuery you can use CSS selectors to get DOM elements in this case #myCheckboxes input:checkbox which is the same as input[type=checkbox].


learn more about jquery here:





I think its the best lib around for this kind of stuff.


Hope this helps,