A c:CheckAllOrNone for custom pages

The default UI allows a “Display Checkboxes (for Multi-Record Selection)” option to be specified that results in a checkbox per table row plus a “Toggle All Rows” checkbox in the column heading. The custom component below provides this “Toggle All Rows” facility for custom UI. Here is an example of it in use:

(The per-row checkbox is usually implemented by wrapping the SObjects in a class that provides a “selected” boolean; pity the platform doesn’t provide a standard mechanism for this as the wrappers add a lot of noise to the controller.)

To use the component add it to the header facet of the table column that contains the checkboxes:

    <apex:facet name="header">
    <apex:inputCheckbox value="{!row.Selected}" title="Select"/>

Here is the definition of the component. It makes assumptions about the structure of the generated HTML to avoid the need for explicit id values to be be specified:

<script type="text/javascript">
function cvCheckAllOrNone(allOrNoneCheckbox) {

    // Find parent table
    var container = allOrNoneCheckbox;
    while (container.tagName != "TABLE") {
        container = container.parentNode;

    // Switch all checkboxes
    var inputs = container.getElementsByTagName("input");
    var checked = allOrNoneCheckbox.checked;
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs.item(i);
        if (input.type == "checkbox") {
            if (input != allOrNoneCheckbox) {
                input.checked = checked;
<apex:inputCheckbox onclick="cvCheckAllOrNone(this)" title="Toggle All Rows"/>

One thought on “A c:CheckAllOrNone for custom pages

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s