Skeeve: Alle Checkboxen einer Spalte umschalten

Beitrag lesen

SELF-Forum

Alle Checkboxen einer Spalte umschalten

Skeeve
– Informationen zu den Bewertungsregeln

Moin!

Randbedingungen wie bei mir üblich: Es geht um eine Applikation die nur mit JavaScript funktioniert und nur auf Gecko Browsern unterstützt ist.

Meine HTML Seiten werden per XSLT generiert. Nun kommt es manchmal vor, daß in einer Spalte einer Tabelle Checkboxen stehen. Diese würde ich gerne über eine weitere Checkbox "auf einen Schlag" (de)aktivieren können.

Gelöst habe ich das im Moment wie folgt:

  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">  
  <head>  
    <script type="text/javascript">  


  
      function toggleAllCheckBoxes(cb, name) {  
        var cell=  getParent( cb, /^(?:TH|TD)$/i );  
        var column= cell.cellIndex;  
        var table= getParent( cell, /^TABLE$/i );  
        var cbs= document.getElementsByName( name );  
        for ( var i= cbs.length ; i-- ; ) with ( cbs[i] ) {  
          if ( tagName != 'INPUT' ) continue;  
          if ( type != 'checkbox' ) continue;  
          if ( table != getParent( cbs[i], /^TABLE$/i ) ) continue;  
          checked= cb.checked;  
        }  
      }  
  
      function getParent( node, pattern ) {  
        while ( node ) {  
          if ( node.tagName.search( pattern ) > -1 ) break;  
          node= node.parentNode;  
        }  
        return node;  
      }  


  
    </script>  
    <title>Request</title>  
  </head>  
  <body>  
    <form action="submitted.html" id="theForm" method="post">  
      <table>  
        <caption>EMEA</caption>  
        <tfoot>  
          <tr>  
            <th>  
              <input type="checkbox" onchange="toggleAllCheckBoxes(this, 'hostid')" name="toggleAllCheckbox"></input>  
            </th>  
            <td colspan="4">  
              All  
            </td>  
          </tr>  
        </tfoot>  
        <thead>  
          <tr>  
            <th>Request?</th>  
            <th>Host ID</th>  
            <th>Host Name</th>  
            <th>Type</th>  
            <th>Date</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <th>  
              <input name="hostid" type="checkbox" value="4711"/>  
            </th>  
            <td>4711</td>  
            <td>Something</td>  
            <td>System</td>  
            <td>2005.10.23 09:30</td>  
          </tr>  
          <tr>  
            <th>  
              <input name="hostid" type="checkbox" value="0815"/>  
            </th>  
            <td>0815</td>  
            <td>Else</td>  
            <td>Cluster</td>  
            <td>2006.01.13 09:30</td>  
          </tr>  
          <tr>  
            <th>  
              <input name="hostid" type="checkbox" value="42"/>  
            </th>  
            <td>42</td>  
            <td>Deep Thought</td>  
            <td>Gigant</td>  
            <td>2006.11.13 11:30</td>  
          </tr>  
        </tbody>  
      </table>  
    </form>  
  </body>  
</html>

Im Moment löse ich es also so, daß ich toggleAllCheckboxes den Namen der Checkboxen übergebe (der immer gleich sein muß) und anschließend alle Objekte dieses Namens daraufhin überprüfe, ob sie:
1. Ein INPUT Element
2. vom Typ checkbox sind
3. und in derselben Tabelle liegen, wie die toggle-Checkbox

Kennt hier jemand eine elegantere Methode?

-- Skeeve

Beitrag melden
–
Informationen zu den Bewertungsregeln