Zur Navigation

Alle Checkboxen markieren

1 Marcel (Gast)

Hallo,

für eine Freundin programmiere ich gerade einen Online-Vokabeltrainer. Dabei muss man zuerst eine Kategorie auswählen um die Vokabeln angezeigt bekommen zu können. Bei der Anzeige steht dann vor jeder Vokabel eine Checkbox und am Ende der Seite ein Button namens "Markierte Vokabeln löschen".
Nun möchte ich am Anfang der Seite außerdem noch eine Checkbox einbauen, welche das Markieren aller Checkboxen gleichzeitig ermöglicht.
Ich habe mich jetzt schon mehrmals an einer Funktion für dieses Vorgehen versucht, doch leider immer ohne Erfolg.

Ich freue mich über jede Art der Hilfe. Danke. :)

04.02.2007 14:11

2 Jörg Kruse

Das Markieren könnte in einer for Schleife ausgeführt werden, die die Nummer der Formularelemente (elements.length) hochzählt:

<script type="text/javascript">
function checkedall()
{
  for (var i = 0; i < document.forms[0].elements.length; i++) {
    document.forms[0].elements[i].checked = true;
  }
}
</script>

<form method="post" action="vokabeln.php">
<ul>
<li><input type="checkbox" name="checkall" onclick="checkedall()" /> alle markieren</li>
<li><input type="checkbox" name="vokabeln[]" value="Vokabel-1" />Vokabel-1</li>
<li><input type="checkbox" name="vokabeln[]" value="Vokabel-2" />Vokabel-2</li>
</ul>
</form>

04.02.2007 14:53

3 Marcel (Gast)

Könnte man das Markieren aller Checkboxen auch noch beim Deaktivieren der "Hauptcheckbox" rückgängig machen?

Beispiel:
"Markieren" - markiert - alle markiert
"Markieren" - nicht markiert - keine markiert

04.02.2007 15:20

4 Jörg Kruse

Man könnte den Wert true / false als Argument übermitteln.

<script type="text/javascript">
<!--
function checkedall(checked)
{
  for (var i = 2; i < document.forms[0].elements.length; i++) {
    document.forms[0].elements[i].checked = checked;
  }
}

//-->
</script>

(der Start-Wert für i in der for Schleife sollte dabei auch noch so erhöht werden, dass die Radio Buttons nicht selbst markiert werden)

<form method="post" action="vokabeln.php">
<p>markieren:<input type="radio" name="checkall" onclick="checkedall(true)" /> alle <input type="radio" name="checkall" onclick="checkedall(false)" /> keine</p>
<ul>
<li><input type="checkbox" name="vokabeln[]" value="Vokabel-1" />Vokabel-1</li>
<li><input type="checkbox" name="vokabeln[]" value="Vokabel-2" />Vokabel-2</li>
</ul>
</form>

04.02.2007 15:38

5 Marcel (Gast)

Danke Jörg.

07.02.2007 20:59

6 YuryR

kann man das noch mehr erweitern? :)


ich habe auf der seite eine reihe checkboxen

name="modell[]"

und

name="zubehoer1[]", name="zubehoer2[]",...

wie kann ich nur die zubehoer "checken" und "unchecken" ?

01.03.2007 15:27

7 Jörg Kruse

Du könntest den Namen der Checkboxen in einem if Konstrukt auswerten, probier es mal so:

function checkedall(checked)
{
  for (var i = 2; i < document.forms[0].elements.length; i++) {
    if (document.forms[0].elements[i].name != 'modell[]') {
      document.forms[0].elements[i].checked = checked;
    }
  }
}

01.03.2007 15:48

8 YuryR

funktioniert :)

nur ein kleines schönheitsproblem..

wenn "alle" aktiv ist (und auch die boxen entprechend geckeckt) ist leider "keine" markiert


und wenn man "keine" markieren will, verschwindet der "checkpunkt" bei den beiden radios ganz weg (un/checken)

01.03.2007 17:39

9 Jörg Kruse

Im Beispielcode in Beitrag 4 habe ich dieSchleife erst bei i = 2 beginnen lassen, um die (Un)Check-Buttons selbst auszunehmen vom (Un)Check. Alternativ könnte man das if Kondstrukt aber auch entsprechend erweitern:

if (document.forms[0].elements[i].name != 'modell[]' && document.forms[0].elements[i].name != 'checkall') {
  document.forms[0].elements[i].checked = checked;
}

01.03.2007 18:01

10 YuryR

zum wievielten mal schreibe ich hier?

"ich liebe dieses forum"



funktioniert so wie es muss :)

01.03.2007 18:18