ugrás a tartalomhoz

Javascript - Checkbox (3 csoportban) - All checked/unchecked csoportonként

peachman · 2013. Már. 12. (K), 19.03
Sajnos nem erősségem a JS és egy feladatot kellene megoldanom. Ehhez szeretném a segítségeteket kérni.
Van egy FORM jó sok elemmel, AJAX alapon DIV váltásokkal megoldva. Van egy olyan része, ahol 3 csoportban vannak checkbox-ok. Még máshol is vannak a form-ban, de azok most nem játszanak. A feladatom az volna, hogy mindegyik csoporthoz tegyek egy olyan checkbox-ot, amivel az adott csoport összes elemét tudom checked/unchecked állapotba tenni. A csoportok elemeit egy PHP rakja össze, így a számuk változó.
HTML minta így nézne ki:
  1. <form name="myform" method="post">  
  2.   
  3. <fieldset id="box1">  
  4. <legend>Test1  
  5. <input type="checkbox" onClick="">  
  6. </legend>  
  7. <input type="checkbox" name="list[]" value="1">Test1<br>  
  8. <input type="checkbox" name="list[]" value="2">Test2<br>  
  9. <input type="checkbox" name="list[]" value="3">Test3<br>  
  10. </fieldset>  
  11.   
  12. <fieldset id="box2">  
  13. <legend>Test2  
  14. <input type="checkbox" onClick="">  
  15. </legend>  
  16. <input type="checkbox" name="list[]" value="4">Test4<br>  
  17. <input type="checkbox" name="list[]" value="5">Test5<br>  
  18. <input type="checkbox" name="list[]" value="6">Test6<br>  
  19. </fieldset>  
  20.   
  21. <fieldset id="box3">  
  22. <legend>Test3  
  23. <input type="checkbox" onClick="">  
  24. </legend>  
  25. <input type="checkbox" name="list[]" value="7">Test7<br>  
  26. <input type="checkbox" name="list[]" value="8">Test8<br>  
  27. <input type="checkbox" name="list[]" value="9">Test9<br>  
  28. </fieldset>  
  29.   
  30. </form>  
Ehhez kellene valami olyan függvény, amit meghívhatok, de a fieldset id alapján tudná az elemeket kezelni.
‹ Harmonizáló színek removeClass ›
 ■
1

A kapcsolónak használt

Poetro · 2013. Már. 12. (K), 19.25
A kapcsolónak használt checkboxoknak adj egy osztályt, és válaszd ki őket. Ezek mindegyikére rakj JS-sel egy click eseménykezelőt. Ez hívjon meg egy függvenyt, ami végigmegy a szülőkön, amíg nem találja meg a fieldset-et, vagy a body-t. Ha megvan a fieldset, akkor annak keresd ki az összes leszármazottját, ami checkbox, és nincsen neki az említett osztálya. Ezeknek a checkboxoknak módosítsd a checked tulajdonságát az aktuálisan bekattintott checkbox checked tulajdonságának függvényében.
2

Köszönöm, hogy segítesz.

peachman · 2013. Már. 12. (K), 19.55
Köszönöm, hogy segítesz. Elméletben értem azt hiszem amit leírtál, de sajnos a JS kódtudásom a nullához közelít. Jelenleg más kódokból próbálom összeollózni a megoldást. Amit leírtál annak a JS kódolását jelen tudásommal még nem tudom megcsinálni. Sajnos.
3

A következőkre lesz

Poetro · 2013. Már. 12. (K), 20.01
A következőkre lesz szükséged:
getElementsByTagName, parentNode, nodeName, className, String.indexOf.
Ha továbbra se boldogulsz, van itt a weblaboron is jó pár cikk, ami JavaScripttel foglalkozik.

Ha valahol megakadnál, vagy valami konkrét kérdésed akad, akkor arra szívesen válaszolunk.
4

Én egy másik vonalon indultam

peachman · 2013. Már. 12. (K), 20.04
Én egy másik vonalon indultam el, de nem az igazi, bár talán működhet.
  1. <SCRIPT LANGUAGE="JavaScript">  
  2. function test() {  
  3.   var len=document.myform.nameBox1.elements.length;  
  4.   for(i=1; i<=len; i++) {  
  5.     obj = document.myform.nameBox1.elements[i];  
  6.     if( document.myform.b1.checked == true ) {  
  7.       obj.checked = true;   
  8.       }  
  9.     else {  
  10.       obj.checked = false;   
  11.       }  
  12.   }  
  13. }  
  14. </script>  
  1. <form name="myform" method="post">  
  2.   
  3.   <fieldset id="box1" name="nameBox1">  
  4.     <legend>Test1   
  5.       <input type="checkbox" name="b1" onClick="test()">  
  6.     </legend>  
  7.     <input type="checkbox" name="list[]" value="1" id="test1">Test1<br>  
  8.     <input type="checkbox" name="list[]" value="2">Test2<br>  
  9.     <input type="checkbox" name="list[]" value="3">Test3<br>  
  10.   </fieldset>  
  11.   
  12.   <fieldset id="box2">  
  13.     <legend>Test2   
  14.       <input type="checkbox" name="b2" onClick="">  
  15.     </legend>  
  16.     <input type="checkbox" name="list[]" value="4">Test4<br>  
  17.     <input type="checkbox" name="list[]" value="5">Test5<br>  
  18.     <input type="checkbox" name="list[]" value="6">Test6<br>  
  19.   </fieldset>  
  20.   
  21.   <fieldset id="box3">  
  22.     <legend>Test3   
  23.       <input type="checkbox" name="b3" onClick="">  
  24.     </legend>  
  25.     <input type="checkbox" name="list[]" value="7">Test7<br>  
  26.     <input type="checkbox" name="list[]" value="8">Test8<br>  
  27.     <input type="checkbox" name="list[]" value="9">Test9<br>  
  28.   </fieldset>  
  29.   
  30. </form>  
Ez zsákutcának néz ki?
5

Végül csúnyán, de sikerült

peachman · 2013. Már. 12. (K), 20.35
Végül csúnyán, de sikerült megoldanom.
  1. <SCRIPT LANGUAGE="JavaScript">  
  2. function blockCbSelecter(boxId, cbValue) {  
  3.   var len=document.getElementById(boxId).elements.length;  
  4.   for(i=1; i<=len; i++) {  
  5.     obj = document.getElementById(boxId).elements[i];  
  6.     if(cbValue)  
  7.       obj.checked = true;  
  8.     else  
  9.       obj.checked = false;  
  10.   }  
  11. }  
  12. </script>  
A Legend-ben lévő checkbox-ok pedig így hívják: onClick="blockCbSelecter('box1', this.checked)"

Sajnos most nincs időm elmélyülni az OOP részben, de amint túlvagyok a mostani feladatokon feltétlen utánajárok annak amit Poetro írt.

Köszönöm a segítséget.