✔ Selektion mit Hilfe von <ul> und Checkbox

raikkonentk · 7. Juli 2009

Hallo,

ich arbeite an der Verbesserung eines internen Ticketsystems, im Moment speziell an der Auswahl der Empfänger der Tickets.

Struktur der Auswahl aussehen soll:

|- Liste 1
|--- Firma 1
|------ Email 1 von Firma 1
|------ Email 2 von Firma 1
|------ Email n von Firma 1
|--- Firma 2
|------ Email 1 von Firma 2
|------ Email 2 von Firma 2
|------ Email n von Firma 2
|--- Firma n
|------ Email n von Firma n
|- Liste 2
|--- Firma 1
|------ Email 1 von Firma 1
|------ Email 2 von Firma 1
|------ Email n von Firma 1
|--- Firma 3
|------ Email 1 von Firma 3
|------ Email 2 von Firma 3
|------ Email n von Firma 3
|--- Firma n
|------ Email n von Firma n
|- Liste n
|--- Firma n
|------ Email n von Firma n

Beim Laden der Seite sieht man zunächst nur die Namen aller Listen, vor den Namen befindet sich ein "+" zum Aufklappen der Listen und eine Checkbox um alle untergeordneten Elemente zu selektieren.

Das Gleiche gilt auch für die Firmen, die werden beim Aufklappen der jeweiligen Liste sichtbar, haben ein "+" vor dem Namen zum Aufklappen, so dass man die Emailadressen sieht und es befindet sich eine Checkbox vor dem Firmemnamen um alle hinterlegten Emailadressen auf einmal zu selektieren.

Und wenn die Firma "aufgeklappt" ist, kann man natürlich die einzelnen Emailadressen an- und abwählen.

Beispielcode für eine Liste

Code:

<ul>
	<li>
		<strong><input type="checkbox" onClick="CheckboxenAktivieren('id_der_liste');" value="1" style="width:auto;"/>Liste n</strong>
		<ul name="id_der_liste">
			<li>
				<input type="checkbox" onClick="CheckboxenAktivieren('id_der_firma');" style="width:auto;"/>Firma 1
				<ul name="id_der_firma">
					<li>
						<input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
					</li>
					<li>
						<input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
					</li>
				</ul>
			</li>
			<li>
				<input type="checkbox" onClick="CheckboxenAktivieren('id_der_firma');" style="width:auto;"/>Firma 2
				<ul name="id_der_firma">
					<li>
						<input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
					</li>
					<li>
						<input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
					</li>
				</ul>
			</li>
			<li>
				<input type="checkbox" onClick="CheckboxenAktivieren('id_der_firma');" style="width:auto;"/>Firma n
				<ul name="id_der_firma">
					<li>
						<input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Das eigentliche Problem ist, dass mir nicht klar ist, wie ich bei der Selektion zwischen Listen und Firmen unterscheiden kann.

Die ID's von Firmen, Listen und Emailadressen können im ungünstigsten Fall alle gleich sein, weil die aus drei verschiedenen Tabellen kommen.

Außerdem kann eine Firma mit verschiedenen Empfängern auch in mehreren Listen auftauchen, so dass ich damit auch schon Probleme hatte.

Am besten wäre es, wenn ich sagen könnte, ich habe <ul> Liste n/Firma n mit dem Namen oder der ID "x" und dann kann ich alle childNodes samt der enthaltenen Checkboxen aktivieren und deaktivieren. Nur leider hat das nicht funktioniert.

Die Funktion "CheckboxenAktivieren(id)" sieht stark vereinfacht, im Moment noch so aus:
(passt glaube ich mittlerweile schon nicht mehr so richtig zu dem obenstehenden HTML-Code)

Code:

function CheckboxenAktivieren(field)
{
	for(i = 0; i < document.getElementsByTagName("input").length; i++)
	{
		var box = document.getElementsByTagName("input")[i];
		if(box == field)
		{
			document.getElementsByTagName("input")[i].checked = true;	
		}
	}
}

Kann mir jemand anhand des Codes einen Hinweis geben?
Ich bin auch für komplett andere Denkansätze offen

Danke schonmal,
Grüße

SCIPIO-AEMILIANUS · 7. Juli 2009

Man hofft man hats richtig verstanden:

HTML:

<html>
    <head>
        <script type="text/javascript">
            function ActivateCheckbox(el) {
                var inp = el.parentNode.getElementsByTagName("input");
                for (i = 0; i < inp.length; i++) {
                    if (inp[i].getAttribute("type") == "checkbox") {
                        inp[i].checked = el.checked;
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <input type="checkbox" onclick="ActivateCheckbox(this);" value="1" style="width:auto;"/><strong>Liste n</strong>
                <ul name="id_der_liste">
                    <li>
                        <input type="checkbox" onclick="ActivateCheckbox(this);" style="width:auto;"/>Firma 1
                        <ul name="id_der_firma">
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                            </li>
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox" onclick="ActivateCheckbox(this);" style="width:auto;"/>Firma 2
                        <ul name="id_der_firma">
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                            </li>
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox" onclick="ActivateCheckbox(this);" style="width:auto;"/>Firma n
                        <ul name="id_der_firma">
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Das ist mir jetzt so ausm Stand dazu eingefallen. Man kann aber immer noch weiter optimieren denk ich mal.

Quaese · 7. Juli 2009

Hi,

ich hatte mal ähnliche Anforderungen. Das Script habe ich mal an deine Problembeschreibung angepasst.

Das Ganze beruht darauf, dass die Liste in jeder Ebene immer die gleiche Struktur aufweist. Damit ist es möglich, sich mit den DOM-Methoden durch die Struktur zu bewegen, ohne IDs zu kennen.

Das Script berücksichtigt neben dem Abwärtsmarkieren auch das Rückwärtsdemarkieren, falls eine untergeordnete Checkbox abgewählt wurde.

Wichtig: es muss der Listenwurzel (=oberstes UL-Element) eine Klasse zugewiesen werden. Der Klassenname muss im Script auch in der Variablen strTopClass abgelegt werden, da dies das Abbruchkriterium beim Rückwärtsabwählen ist.

Ich habe den Quellcode weitestgehend kommentiert, so dass du dich zurechtfinden solltest.

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Klasse des "obersten" UL-Elements (=Listenwurzel)
var strTopClass = "clListe"

// Nächste Ebene ein-/ausblenden
function toggleList(objThis){
  var objP = objThis.parentNode;
  while(objP.nodeName.toUpperCase() != "LI"){
    objP = objP.parentNode;
  }

  var objHelp = objP.getElementsByTagName("ul")[0];
  objHelp.style.display = (objHelp.style.display == "none")? "block" : "none";
}

// Checkboxen an-/abwählen
function checkBoxes(objThis){
  // CB an- oder abgewählt (true/false)
  var blnChecked = objThis.checked;
  // Elternknoten des aufrufenden Elements
  var objHelp = objThis.parentNode;

  // Solange das nächste übergeordente LI-Element nicht gefunden wurde
  while(objHelp.nodeName.toUpperCase() != "LI"){
    // Nächster Elternknoten
    objHelp = objHelp.parentNode;
  }

  // Array aller untergeordneter Input-Elemente
  var arrInput = objHelp.getElementsByTagName("input");
  var intLen = arrInput.length;

  // Alle untergeordneten Inputelemente durchlaufen
  for(var i=0; i<intLen; i++){
    // Falls es sich um eine CB handelt -> an-/abwählen
    if(arrInput[i].type = "checkbox"){
      arrInput[i].checked = blnChecked;
    }
  }

  // Falls die auslösende CB abgewählt wurde -> übergeordnete rückwärts ebenfalls abwählen
  if(!blnChecked)
    uncheckBoxes(objThis);
}

// Wählt zu einer auslösenden CB alle übergeordneten CBs rückwärts ab
function uncheckBoxes(objThis){
  var blnChecked = objThis.checked;
  if(blnChecked) return;

  var objHelp = objThis.parentNode;

  // Solange die Listenwurzel noch nicht erreicht wurde
  while(objHelp.className != strTopClass){
    // Falls es sich um ein LI-Element handelt -> erste CB ermitteln und abwählen
    if(objHelp.nodeName.toUpperCase() == "LI"){
      var objIn = objHelp.getElementsByTagName("input")[0];
      if(objIn.type == "checkbox"){
      	objIn.checked = blnChecked;
      }
    }
    // Nächster Elternknoten
    objHelp = objHelp.parentNode;
  }
}
</script>
</head>
<body>

<ul class="clListe">
	<li>
		<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><strong><input onclick="checkBoxes(this);" type="checkbox" value="1" style="width:auto;"/>Liste n-1</strong>
		<ul name="id_der_liste" style="display: none;">
			<li>
				<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 1
				<ul name="id_der_firma" style="display: none;">
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
					</li>
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
					</li>
				</ul>
			</li>
			<li>
				<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 2
				<ul name="id_der_firma" style="display: none;">
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
					</li>
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
					</li>
				</ul>
			</li>
			<li>
				<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma n
				<ul name="id_der_firma" style="display: none;">
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
					</li>
				</ul>
			</li>
		</ul>
	</li>

	<li>
		<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><strong><input onclick="checkBoxes(this);" type="checkbox" value="1" style="width:auto;"/>Liste n</strong>
		<ul name="id_der_liste" style="display: none;">
			<li>
				<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 1
				<ul name="id_der_firma" style="display: none;">
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
					</li>
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
					</li>
				</ul>
			</li>
			<li>
				<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 2
				<ul name="id_der_firma" style="display: none;">
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
					</li>
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
					</li>
				</ul>
			</li>
			<li>
				<img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma n
				<ul name="id_der_firma" style="display: none;">
					<li>
						<input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese

raikkonentk · 7. Juli 2009

hat bestens funktioniert. danke

✔ Selektion mit Hilfe von <ul> und Checkbox

raikkonentk

Mitglied

SCIPIO-AEMILIANUS

aka Dubdidadu

Quaese

Moderator

raikkonentk

Mitglied

Neue Beiträge