Checkbox probleem

express · 24 feb 2008

Ik heb een form met allemaal checkboxen die geladen worden uit een mysql / sql database (via PHP), er zijn er die onderling wat met elkaar temaken hebben zodoende dat wanneer er 1 wordt aangevinkt die onderliggende ook aangevinkt moeten worden. Eerst had ik dit gedaan met een simpele knop in PHP en dat heel de pagina opnieuw geladen moest worden, via een logica zien welke knop was aangevinkt en dan ook nog eens checken welke er nu automatisch moeten bij worden aangevinkt (de onderliggende). Omdat dit weinig proffesioneel is zou ik het graag met een onClick commando doen in Javascript, maar ik heb geen idee hoe ik die logica toestanden er moet in plaatsen (er zou bv wrs wat geladen moeten worden uit de mysql / sql database).

Om het iets duidelijker te maken een vb van zo'n form:
. checkbox1
. checkbox2
. -- checkbox3
. ---- checkbox4
. ---- checkbox5
. -- checkbox6
. ---- checkbox7
. checkbox8
. checkbox9
. -- checkbox10
. checkbox11

Als checkbox3 wordt aangevinkt zou dus automatisch checkbox4 & checkbox5 ook moeten worden aangevinkt.
En als checkbox2 wordt aangevinkt dan moet alles vanaf checkbox2 tot en met checkbox7 moeten worden aangevinkt.

Is dit mogelijk of redelijk ondoenbaar omdat het geen vaste form is, maar veranderd kan worden door de gegevens van de database te wijzigen (hierin staat waar elke checkbox bijhoort).

Is er mss iemand die mij wat kan helpen of mss wat meer opweg kan zetten, want ik heb toch niet echt iets op het net gevonden dat hierop lijkt (enkel vaste forms).

Alvast bedankt.

Johantrax · 25 feb 2008

In dit geval zou ik PHP ook je javascriptfuncties laten genereren.
Je laat voor elke checkbox die er is een functie aanmaken (bvb 'doClick_'+nr ) die alle sub-boxes dezelfde waarde als zichzelf geeft. Dan verwijs je natuurlijk naar deze functies vanaf de checkbox met een onClick/onChange-handler (niet zeker welk van de 2 het meest geschikt is), wat op zich geen probleem kan zijn wegens de logische naamgeving.

Hopelijk geraak je er wat aan uit, moest het niet lukken, post dan maar wat je zelf al gefabriceerd hebt

--Johan

express · 26 feb 2008

Hey, er is me ergens anders aangeraden om te werken met nested list + een bepaalde function. Wat me precies toch ordelijker lijkt dan een javascript te laten aanmaken via PHP (wat ook wel doenbaar is

. Maar ik kom er niet direct uit, volgens mij ligt het gewoon aan de gegevens die ik meestuur met het onclick commando, maar mits de javascript leek dat ik, blijkt het toch niet te werken.
Ik werk nu met een test bestandje met hierin enkel javascript en HTML (en een regeltje CSS) wat toch gemakkelijker leesbaar is dan die PHP code erbij

.

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        #nested_lists ul { list-style-type: none; }
    </style>
    <script type="text/javascript">
        function clickchilds(element, checked) {
      // get childs
      var childs = null
      if(element.tagName == 'INPUT' && element.type == 'checkbox') {
        childs = element.parentNode.childNodes
        checked = element.checked
      } else
        childs = element.childNodes
    
      // recursively check childs
      if(childs != null) {
        for(var i in childs) {
          var child = childs[i]
          if(child.nodeType == 1) {  // Node.ELEMENT_NODE
            if(child.tagName == 'INPUT' && child.type == 'checkbox')
              child.checked = checked
            else  
              clickchilds(child, checked)
          }
        }
      }
    }
    </script>

HTML:

<title>Untitled Document</title>
</head>
<body>
<div id="nested_lists">
  <ul>
      <li><input class="" type="checkbox" name="1" id="1" onclick="clickchilds(1,1)" />BT
          <ul>
              <li><input class="" type="checkbox" name="2" id="2" onclick="clickchilds(2,1)" />Bloemenlei(Sterrenhuis) </li>
              <li><input class="" type="checkbox" name="3" id="3" onclick="clickchilds(3,1)" />Huize Goeyers(De Vluchtheuvel)</li>
              <li><input class="" type="checkbox" name="4" id="4" onclick="clickchilds(4,1)" />Kaartse Bossen(Sterrenhuis)</li>
              <li><input class="" type="checkbox" name="5" id="5" onclick="clickchilds(5,1)" />WE1(Sterrenhuis)
                  <ul>
                      <li><input class="" type="checkbox" name="6" id="6" onclick="clickchilds(6,1)"  />Woning 1(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="7" id="7" onclick="clickchilds(7,1)"  />Woning 2(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="8" id="8" onclick="clickchilds(8,1)"  />Woning 3(Sterrenhuis)</li>
                  </ul>
              </li>
              <li><input class="" type="checkbox" name="9" id="9" onclick="clickchilds(9,1)"  />WE2(Sterrenhuis)
                  <ul>
                      <li><input class="" type="checkbox" name="10" id="10" onclick="clickchilds(10,1)"  />Woning 4(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="11" id="11" onclick="clickchilds(11,1)"  />Woning 5(Sterrenhuis)</li>
                  </ul>
              </li>
              <li><input class="" type="checkbox" name="12" id="12" onclick="clickchilds(12,1)"  />WE3(Sterrenhuis)
                  <ul>
                      <li><input class="" type="checkbox" name="13" id="13" onclick="clickchilds(13,1)"  />Woning 6(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="14" id="14" onclick="clickchilds(14,1)"  />Woning 7(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="15" id="15" onclick="clickchilds(15,1)"  />Woning 8(Sterrenhuis)</li>
                  </ul>
              </li>
          </ul >
      </li>
      <li><input class="" type="checkbox" name="16"id="16"  onclick="clickchilds(16,1)"  />BW
          <ul>
              <li><input class="" type="checkbox" name="17" id="17" onclick="clickchilds(17,1)"  />De Steiger(Sterrenhuis) </li>
              <li><input class="" type="checkbox" name="18" id="18" onclick="clickchilds(18,1)"  />Laageind 40(De Vluchtheuvel)</li>
              <li><input class="" type="checkbox" name="19" id="19" onclick="clickchilds(19,1)"  />Verhoevenlei(Sterrenhuis)</li>
          </ul >
      </li>
  </ul >
</div>
</body>
</html>

Zou er iemand me soms kunnen vertellen wat er veranderd moet worden? Al zeker hartelijk dank voor de vorige hulp.

EDIT: Ik heb ondertussen al wel door dat wanneer de functie moet opgeroepen worden, de eerste variabele (het element dus) niet de idd nummer moet zijn maar gewoon this.

Nu ben ik aan het proberen om ervoor te zorgen dat wanneer het vinkje wordt uitgevinkt, de childs niet mee worden uitgevinkt.

Egel · 27 feb 2008

Ik zou het iets anders doen:

PHP:

<html>
<head>
<title>Checkbox-check</title>


<script type="text/javascript">
 // Egel 080227 ;)
 uncheck = false;
 function check(box) {
  if (box.checked || uncheck) {
   var f = document.nested_lists.elements;
   for (var i = 0; i < f.length; i++) {
    if (f[i].type == 'checkbox') {
     if (f[i].name.indexOf(box.name) == 0) {
      f[i].checked = box.checked;
      };
     };
    };
   };
  };
</script>


</head>
<body>


<form name="nested_lists">
  <ul>
      <li><input class="" type="checkbox" name="a" onclick="check(this)" />BT
          <ul>
              <li><input class="" type="checkbox" name="aa" onclick="check(this)" />Bloemenlei(Sterrenhuis) </li>
              <li><input class="" type="checkbox" name="ab" onclick="check(this)" />Huize Goeyers(De Vluchtheuvel)</li>
              <li><input class="" type="checkbox" name="ac" onclick="check(this)" />Kaartse Bossen(Sterrenhuis)</li>
              <li><input class="" type="checkbox" name="ad" onclick="check(this)" />WE1(Sterrenhuis)
                  <ul>
                      <li><input class="" type="checkbox" name="ada" onclick="check(this)"  />Woning 1(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="adb" onclick="check(this)"  />Woning 2(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="adc" onclick="check(this)"  />Woning 3(Sterrenhuis)</li>
                  </ul>
              </li>
              <li><input class="" type="checkbox" name="ae" onclick="check(this)"  />WE2(Sterrenhuis)
                  <ul>
                      <li><input class="" type="checkbox" name="aea" onclick="check(this)"  />Woning 4(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="aeb" onclick="check(this)"  />Woning 5(Sterrenhuis)</li>
                  </ul>
              </li>
              <li><input class="" type="checkbox" name="af" onclick="check(this)"  />WE3(Sterrenhuis)
                  <ul>
                      <li><input class="" type="checkbox" name="afa" onclick="check(this)"  />Woning 6(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="afb" onclick="check(this)"  />Woning 7(Sterrenhuis)</li>
                      <li><input class="" type="checkbox" name="afc" onclick="check(this)"  />Woning 8(Sterrenhuis)</li>
                  </ul>
              </li>
          </ul >
      </li>
      <li><input class="" type="checkbox" name="b"  onclick="check(this)"  />BW
          <ul>
              <li><input class="" type="checkbox" name="ba" onclick="check(this)"  />De Steiger(Sterrenhuis) </li>
              <li><input class="" type="checkbox" name="bb" onclick="check(this)"  />Laageind 40(De Vluchtheuvel)</li>
              <li><input class="" type="checkbox" name="bc" onclick="check(this)"  />Verhoevenlei(Sterrenhuis)</li>
          </ul >
      </li>
  </ul >
</form>


</body>
</html>

Maar daar moet je dan wel de Php de goede namen voor laten genereren.

Vr.Gr. Egel.

express · 1 mrt 2008

Bedankt Egel,

heb eerst wat testen zitten te doen met een vaste nested_list + de aanpassing geprobeerd dat wanneer je een child uitvink, de parent ervan (en zijn parent) ook automatisch wordt uitgevinkt. En dit werkt ondertss (op +/- dezelfde wijze als het selecteren bij jou).

Bedankt voor de hulp.

Checkbox probleem

express

Gebruiker

Johantrax

Terugkerende gebruiker

express

Gebruiker

Egel

Terugkerende gebruiker

express

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy