✔ checkbox automatisch aktivieren

S

südpol

Erfahrenes Mitglied
Hi

ich habe hier ein Formular welches aus einer Datenbank dynamisch zusammen gestellt wird das Ergebnis umfasst eine baumstruktur aus aus Checkboxen also z. B. so:

Code: 
<form name="testform" action="test.php" methode="post">
  <input type="checkbox" name="test[]" value="1">opt 1</input><br />
    <div id="1">
    &nbsp;<input type="checkbox" name="test[]" value="2">opt 2</input><br />
    &nbsp;<input type="checkbox" name="test[]" value="3">opt 3</input><br />
      <div id="3">
      &nbsp;&nbsp;<input type="checkbox" name="test[]" value="4">opt 4</input><br />
      &nbsp;&nbsp;<input type="checkbox" name="test[]" value="5">opt 5</input><br /> 
      </div>
    &nbsp;<input type="checkbox" name="test[]" value="6">opt 6</input><br />
    </div>
  <input type="checkbox" name="test[]" value="7">opt 7</input><br />
</form>

So ich will nun erreichen, dass wenn man z. B. opt1 aktiviert, dass dann alle input felder innerhalb von <div id="1"> auch aktiviert werden das gleich Spiel, wenn es abgwählt wird. Geht das und wenn ja wie? Ich habe zwar nunmehr schon ein ganzes Buch zu javascript gelesen jedoch habe ich keine Möglichkeit gefunden eine solche funktion umzusetzen. *heul*

Gruß
 
Gehe alle Kindknoten(childNodes) des <div> durch.
Hat ein Kindknoten den tagName "input" und den type "checkbox", weise seiner checked-Eigenschaft den selben Wert zu, den die checked-Eigenschaft der angeklickten Checkbox besitzt.
 
hmm ok, und warum komme ich da nicht drauf. Diesen Ansatz kann ich denke ich mit Hilfe des bisher gelernten umsetzen. Dank dir für die Hilfe!

schönen Tag noch!
 
Hi,

so jetzt kommt das letzte Projekt dran - danach bin ich mit Javascript fertig *freu*

Ich habe diese funktion jetzt mal geschrieben - jedoch verweigert sie ohne Fehlermeldung seinen Dienst. Sieht zufällig jemand einen logischen Fehler in dem Script?

Code: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
 <title>Test</title>
 <script type="text/javascript">
  function subCheck(obj, divName) { 
    if(document.getElementById(divName).hasChildNodes()) {
      if(this.checked == true) {
        var option = true 
        
      } else {
        var option = false
      }
      for(var j = 0; j < document.getElementById(divName).childNodes.length; j++) { 
        if(document.getElementById(divName).childNodes[j].tagName == "input") {
          document.getElementById(divName).childNodes[j].checked = option
        }
      }
    }
  }  
 </script>
</head>
<body>
        
<form name="form">
  <input onclick="subCheck(this, 'ph_1');" type="checkbox" name="phases[]" value="1">test1</input><br />
  <div id="ph_1">
    &nbsp;&nbsp;<input type="checkbox" name="phases[]" value="2">test2</input><br />
    &nbsp;&nbsp;<input type="checkbox" name="phases[]" value="3">test3</input><br />
  </div>
  <input onclick="subCheck(this, 'ph_4');" type="checkbox" name="phases[]" value="4">test4</input><br />  
  <div id="ph_4">
  &nbsp;&nbsp;<input type="checkbox" name="phases[]" value="5">test5</input><br />
  </div>
  <input type="submit" value="klick mich" />
</form>

</body>
</html>

Viele Grüße
 
Problem#1:
Code: 
if(this.checked == true) {
statt "this" muss dort "obj" stehen... dass ist der Name der zur Verfügung stehenden Variable, welche das Checkbox-Objekt enthält.

Problem#2:
Code: 
if(document.getElementById(divName).childNodes[j].tagName == "input") {
der IE gibt den tagName, falls vorhanden, in GROSSBUCHSTABEN zurück..... daher schlägt der Vergleich fehl.
Schreib das "input" daher GROSS.
 
*heul* danke! Hatte beides gerade auch durch einige alerts rausgefunden

Code: 
 <script type="text/javascript">
  function subCheck(obj, divName) {
    if(obj.checked == true) {
      checkAction = true
    } else {
      checkAction = false
    }
    if(document.getElementById(divName).hasChildNodes()) {
      for(var j = 0; j < document.getElementById(divName).childNodes.length; j++) {
        fields += document.getElementById(divName).childNodes[j].tagName 
        if(document.getElementById(divName).childNodes[j].tagName == "INPUT") {
          document.getElementById(divName).childNodes[j].checked = checkAction
        }
      }
    }
  }  
 </script>

du bist einfach zu schnell für mich! :-) Vielen Dank! Jetzt ist mein Projekt so gut wie fertig. *tirili* das Wochenende kann kommen...

noch mal vielen Dank für deine sehr schnelle und freundliche Hilfe!
 
Hi,

ich habe mich vor kurzem belehren lassen, dass jedes Element nach den neuen W3C Vorgaben ein Endtag hat. Die Browser schlucken das soweit ganz gut :D Bei Gelegenheit muss ich mal nachlesen, ob dem tatsächlich so ist.

Habe jetzt meine Beispielfunktion in mein Hauptscript eingebaut und feststellen müssen, dass ich das Beispiel zu sehr vereinfach habe *grml* Die Input elemente liegen bei mir nicht direkt unter dem div Tag sondern sind noch in eine tabelle eingepackt. Gibt es eine javascript funktion die diesen Baum in eine beliebige Tiefe durchläuft oder muss ich mir eine rekursion selber bauen?

Gruß
 
juhu, langsam aber sicher finde ich mich auch in der javascript welt zurecht.

für die Nachwelt nachfolgend das funktionsfähige und getestete script mit rekursion:

Code: 
function subCheck(obj, divName) {
  if(obj.checked == true) {
    checkAction = true
  } else {
    checkAction = false
  }
  if(document.getElementById(divName).hasChildNodes()) {
    for(var j = 0; j < document.getElementById(divName).childNodes.length; j++) {
      if(document.getElementById(divName).childNodes[j].tagName == "INPUT") {
        document.getElementById(divName).childNodes[j].checked = checkAction
      }
      if(document.getElementById(divName).childNodes[j].hasChildNodes()) {
        subCheckReku(document.getElementById(divName).childNodes[j], checkAction)
      }
    }
  }
}

function subCheckReku(obj, checkAction) {
  if(obj.hasChildNodes()) {
    for(var j = 0; j < obj.childNodes.length; j++) {
      if(obj.childNodes[j].tagName == "INPUT") {
        obj.childNodes[j].checked = checkAction
      }
      if(obj.childNodes[j].hasChildNodes()) {
        subCheckReku(obj.childNodes[j], checkAction)
      }
    }
  }
}

ich wünsch dir ein wunderschönes Wochenende!

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück