In an application that has multiple checkboxes (see for example the Previous entry) it can be useful to have a button that will check or uncheck all the checkboxes before sending a request to the server. This can be done as follows. (This is expressed in terms of Albatross macros, but it's really just plain ol' HTML hacking.)

First, a macro to define a little chunk of Javascript to to the hard work:

<al-macro name="checkall-script">
  <!-- This allows the "Check All" button to work -->
  <SCRIPT LANGUAGE="JavaScript">
    <!-- Originally from: -->
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Heavily hacked by gnb@itga.com.au to support multiple lists -->
    <!-- on the one page. -->

   <!-- Begin
    var checked = new Array()
    function check(field, desc) {
        if (!checked[desc]) {
            for (i = 0; i < field.length; i++) {
                field[i].checked = true;
            }
            checked[desc] = 1;
            return "Un" + desc + " All"; 
        } else {
            for (i = 0; i < field.length; i++) {
                    field[i].checked = false; 
            }
            checked[desc] = 0;
            return desc + " All"; 
        }
    }
    //  End -->
  </script>
</al-macro>

This macro should be expanded somewhere inside the <head>...</head> section of any page that needs this function.

To use this function, create an <al-input> item in the same <al-form> as the checkboxes you want to be able to set. The following template assumes each element in the table has a checkbox named "ignore":

<al-form method="post">
  <table>
    <tr><th>Ignore?</th>...</tr>
    <al-for iter="i" expr="list_of_items()">
       <tr>
         <td><al-input type="checkbox" name="ignore" valueexpr="i.value().id()" list></td>
         # ....
       </tr>
    </al-for>
    <tr>
      <td colspan="3"> 
        <al-input type="button" name="checkall" value="Ignore All"
                  onClick="this.value=check(this.form.ignore, 'Ignore')">
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <al-input type="submit" name="process" value="Start Processing">
      </td>
    </tr>
    
  </table>
  
</al-form>            

This creates a table with a bunch of rows. Each row has an Ignore checkbox, and there are two buttons (an 'Ignore All' button and a 'Start Processing' button) at the bottom of the list. When the page is first displayed, the first button is labelled 'Ignore All', and selecting it will tick every Ignore checkbox on the page. (This is done locally in the browser without submitting anything back to the server so the Albatross application won't see it.) Selecting this button also changes its label to 'unIgnore All', and the next time it is selected, it will untick every checkbox in the form. So this button alternates between 'Ignore All' and 'unIgnore All' as it is selected.

If your data has more than 1 checkbox, you can have more than 1 'select all' button by changing the args to the check() function.

None: Check_All (last edited 2011-02-15 06:05:18 by localhost)