How to find out which checkboxes have been selected on the next page in VisualForce?

Question

I have a data table which iterates through a custom object and generates checkboxes. On the second page, I want to determine which of these checkboxes have been selected.

In the VisualForce page:

 Age <apex:inputText value="{!age}" id="age" />
 <apex:dataTable value="{!Areas}" var="a">
      <apex:column >
      <apex:inputCheckbox value="{!a.name}" /> <apex:outputText value="{!a.name}" />
      </apex:column>
  </apex:dataTable>

In the Controller:

 public String age {get; set; }
  public List<Area_Of_Interest__c> getAreas() {
      areas = [select id, name from Area_Of_Interest__c];
      return areas;
  }

On my second page, I can retrieve the value that the user put in the textbox "age" by using {!age}. How Do I retrieve which checkboxes have been checked?

Thank you.

Solution 1

Ok, if you want to handle it with Javascript, use Pavel's method, otherwise use the following to do it via the controller. You must create a wrapper class for whatever you wish to track. I'm not sure how it works, but somehow if you name a boolean variable "selected" in your wrapper class, it is mapped to the checkbox. Below is the code:

So in your Visual force page, do:

<apex:dataTable value="{!Foos}" var="f">
    <apex:column >
        <apex:outputLabel value="{!f.foo.name}" /> <apex:inputCheckbox value="{!f.selected}" />
    </apex:column>
 </apex:dataTable>
 <apex:commandButton action="{!getPage2}" value="go"/>

In your Controller, do the following: 1) Make a Wrapper class with the boolean "selected", which somehow maps to the inputCheckbox selected:

public class wFoo {
    public Foo__c foo {get; set}
    public boolean selected {get; set;}

    public wFoo(Foo__c foo) {
        this.foo = foo;
        selected = false; //If you want all checkboxes initially selected, set this to true
    }
}

2) declare the list variables

public List<wFoo> foos {get; set;}
public List<Foo__c> selectedFoos {get; set;}

3) Define the accessor for the List

public List<wFoo> getFoos() {
    if (foos == null) {
        foos = new List<wFoo>();
        for (Foo__c foo : [select id, name from Foo__c]) {
            foos.add(new wFoo(foo));
        }
    }
    return foos;
}

4) Define the method to process the selected checkboxes and place them in a List for use on another page

public void processSelectedFoos() {
    selectedFoos = new List<Foo__c>();
    for (wFoo foo : getFoos) {
        if (foo.selected = true) {
            selectedFoos.add(foo.foo); // This adds the wrapper wFoo's real Foo__c
        }
    }
}

5) Define the method to return the PageReference to the next page when the submit button is clicked

public PageReference getPage2() {
    processSelectedFoos();
    return Page.Page2;
}

Solution 2

In my current project I had faced with the same issue. I used apex:pageBlockTable, but I guess that you can use my code (I made some changes in my code for an object names)

<apex:pageBlockTable value="{!Areas}" var="areas">
    <apex:column width="25px">
        <apex:facet name="header">
            <input type="checkbox" onClick="selectAll();" />
        </apex:facet>
        <input type="checkbox" id="{!areas.Id}" onClick="saveSelection();" />
    </apex:column>
... some additional columns
</apex:pageBlockTable>

I had placed custom object ids to the input id in html, and it looks as

<input id="003R000000lCIq6IAG" onclick="saveSelection();" type="checkbox">
<input id="003R000000lCIoJIAW" onclick="saveSelection();" type="checkbox">

The saveSelection() function has written on javascript

<script>
var areaIds = [];

function saveSelection() {
    var selectedIds = areaIds.join('');
    $j(':checkbox').each(function(){
        if (this.checked) {
            if (selectedIds.indexOf(this.id) === -1) {
                areaIds.push(this.id);
                selectedIds = selectedIds + this.id;
            }
        } else {
            if (selectedIds.indexOf(this.id) !== -1) {
                for (i=0; i < areaIds.length; i++) {
                    if (areaIds[i] === this.id) {
                        areaIds.splice(i, 1);
                        selectedIds = areaIds.join('');
                    }
                }
            }
        }                      
    });
}

and for the restoring was used the following code

function restoreSelection() {
    contIds = areaIds.join('');
    i = 0;
    $j(':checkbox').each(function(){ if(this.id !== ''){  if(contIds.indexOf(this.id) !== -1){this.checked=true;};}});

}

I use jQuery here, that means you should include the following code to your page too

<apex:includeScript id="JQuery" value="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"/>
... some code
<script>
    window.$j = jQuery.noConflict();
    ... some code
</script>

The js is also involved from pagination buttons:

<apex:panelGrid columns="7">
   <apex:commandButton status="fetchStatus" reRender="results" value="|<" action="{!first}" disabled="{!!hasPrevious}" title="First Page" onClick="saveSelection();" oncomplete="   restoreSelection()"/>
   <apex:commandButton status="fetchStatus" reRender="results" value="<" action="{!previous}" disabled="{!!hasPrevious}" title="Previous Page" onClick="saveSelection();"    oncomplete="restoreSelection()"/>
   <apex:commandButton status="fetchStatus" reRender="results" value=">" action="{!next}" disabled="{!!hasNext}" title="Next Page" onClick="saveSelection();" oncomplete="   restoreSelection()"/>
   <apex:commandButton status="fetchStatus" reRender="results" value=">|" action="{!last}" disabled="{!!hasNext}" title="Last Page" onClick="saveSelection();" oncomplete="   restoreSelection()" />
   <apex:outputText >{!(pageNumber * size)+1-size}-{!IF((pageNumber * size)>noOfRecords, noOfRecords,(pageNumber * size))} of {!noOfRecords}</apex:outputText>
   <apex:outputPanel style="color:#4AA02C;font-weight:bold">
       <apex:actionStatus id="fetchStatus" startText="Fetching..." stopText=""/>
   </apex:outputPanel> 
</apex:panelGrid>

I hope this may help you.