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:
<form name="myform" method="post">

<fieldset id="box1">
<legend>Test1
<input type="checkbox" onClick="">
</legend>
<input type="checkbox" name="list[]" value="1">Test1<br>
<input type="checkbox" name="list[]" value="2">Test2<br>
<input type="checkbox" name="list[]" value="3">Test3<br>
</fieldset>

<fieldset id="box2">
<legend>Test2
<input type="checkbox" onClick="">
</legend>
<input type="checkbox" name="list[]" value="4">Test4<br>
<input type="checkbox" name="list[]" value="5">Test5<br>
<input type="checkbox" name="list[]" value="6">Test6<br>
</fieldset>

<fieldset id="box3">
<legend>Test3
<input type="checkbox" onClick="">
</legend>
<input type="checkbox" name="list[]" value="7">Test7<br>
<input type="checkbox" name="list[]" value="8">Test8<br>
<input type="checkbox" name="list[]" value="9">Test9<br>
</fieldset>

</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.
<SCRIPT LANGUAGE="JavaScript">
function test() {
  var len=document.myform.nameBox1.elements.length;
  for(i=1; i<=len; i++) {
    obj = document.myform.nameBox1.elements[i];
    if( document.myform.b1.checked == true ) {
      obj.checked = true; 
      }
    else {
      obj.checked = false; 
      }
  }
}
</script>
  <form name="myform" method="post">

    <fieldset id="box1" name="nameBox1">
      <legend>Test1 
        <input type="checkbox" name="b1" onClick="test()">
      </legend>
      <input type="checkbox" name="list[]" value="1" id="test1">Test1<br>
      <input type="checkbox" name="list[]" value="2">Test2<br>
      <input type="checkbox" name="list[]" value="3">Test3<br>
    </fieldset>

    <fieldset id="box2">
      <legend>Test2 
        <input type="checkbox" name="b2" onClick="">
      </legend>
      <input type="checkbox" name="list[]" value="4">Test4<br>
      <input type="checkbox" name="list[]" value="5">Test5<br>
      <input type="checkbox" name="list[]" value="6">Test6<br>
    </fieldset>

    <fieldset id="box3">
      <legend>Test3 
        <input type="checkbox" name="b3" onClick="">
      </legend>
      <input type="checkbox" name="list[]" value="7">Test7<br>
      <input type="checkbox" name="list[]" value="8">Test8<br>
      <input type="checkbox" name="list[]" value="9">Test9<br>
    </fieldset>

  </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.
<SCRIPT LANGUAGE="JavaScript">
function blockCbSelecter(boxId, cbValue) {
  var len=document.getElementById(boxId).elements.length;
  for(i=1; i<=len; i++) {
    obj = document.getElementById(boxId).elements[i];
    if(cbValue)
      obj.checked = true;
    else
      obj.checked = false;
  }
}
</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.