ugrás a tartalomhoz

CHECKBOX kipipálásra legördülő lista

attiss94 · 2011. Nov. 25. (P), 21.27
Sziasztok!
Rengeteget Google-ztam mielőtt feltettem a kérdést. Jelenleg szeretnék csinálni egy programot, ami abból áll, hogy van egy CHECKBOX "listám" (egymás alatt jelennek meg) tegyük fel, hogy így:

□ Gabona
□ Zöldség
□ Gyümölcs.

Ha bepipálom a Gabona előtti CHECKBOX-ot, akkor gördüljön le egy lista és tolja le a többi elemet így:

■ Gabona
- Búza
- Zab
□ Zöldség
□ Gyümölcs.

Addig eljutottam, hogy sikerült kipipálástól függően eltüntetni/megjeleníteni az elemeket, de hogyan tudom megcsinálni, hogy ne legyen alattuk az a hely, ami az eltüntetett elemeknek szükséges, hanem kipipáláskor csússzon le?

Javasript:
  1. function rejtes(chkbox, group)  
  2.     {   
  3.         var visSetting = (chkbox.checked) ? "visible" : "hidden";   
  4.         document.getElementById(group).style.visibility = visSetting;   
  5.     }  
CSS:
  1. #rejtett  
  2.     {  
  3.         visibility:hidden;  
  4.     }  
  5.       
  6. #rejtett1  
  7.     {  
  8.         visibility:hidden;  
  9.     }  
HTML:
  1. <input type="checkbox" name="gabona" onclick="rejtes(this, 'rejtett')" /> Gabona  
  2. <span id="rejtett">  
  3.     <li><input type="checkbox" />Búza</li>  
  4.     <li><input type="checkbox" />Rizs</li>  
  5.     <li><input type="checkbox" />Korpa</li>  
  6.     <li><input type="checkbox" />Árpa</li>  
  7. </span>  
  8. <input type="checkbox" name="zoldseg" onclick="rejtes(this, 'rejtett1')" /> Zöldség  
  9. <span id="rejtett1">  
  10.     <li><input type="checkbox" />Répa</li>  
  11.     <li><input type="checkbox" />Krumpli</li>  
  12. </span>  
‹ Jquery Div effect Footer probléma ›
 ■
1

visibility

Poetro · 2011. Nov. 25. (P), 21.37
Ne visibility-t használj. A visiblity csak annyit csinál, hogy nem látszik, de foglalja a helyet. Használj helyette display CSS tulajdonságot.
2

Köszönöm a választ!

attiss94 · 2011. Nov. 25. (P), 21.53
Köszönöm a választ!

Ha valakit érdekel, akkor a következő kódok változtak:

JavaScript:
  1. function rejtes(chkbox, group)  
  2.     {   
  3.         var beallitasok = (chkbox.checked) ? "block" : "none";   
  4.         document.getElementById(group).style.display = beallitasok;   
  5.     }  
CSS:
  1. #rejtett  
  2.     {  
  3.         display: none;  
  4.     }  
  5.       
  6. #rejtett1  
  7.     {  
  8.         display: none;  
  9.     }  
3

Poetro nem mondta, a

Leonuh · 2011. Nov. 26. (Szo), 00.17
Poetro nem mondta, a kerdesedhez nem tartozik hozza, de nem csinalunk ilyet manapsag, (ha igenyesen szeretnel programozni). A javascript kezelest es az oldal felepiteset kulon valasszuk (95%-ban). Ergo keruljuk az event handlerek inline alkalmazasat attol fuggetlenul hogy lehetseges, mivel hosszutavon atlathatatlan kodot fogsz gyartani. Kis segitseg:

"window.onload" illetve "addEvenetListener" leirtam ket kulcsszot ami szamodra hasznos lehet.

https://developer.mozilla.org/en/DOM/element.addEventListener