Hallo zusammen,
ich bin leider blutiger JS-Anfänger, brauche jedoch ein Javascript für folgendes Problem. Zum Hintergrund: bei dem HTML-Code handelt es sich um automatisch generierten Code für Online-Befragungen. Leider ist es nicht möglich, auf die Struktur Einfluss zu nehmen. Die einzige Möglichkeit ist eben, die einzelnen Elemente mit Javascript anzufassen und zu verändern. Dass die Struktur extrem kompliziert/verschachtelt und absolut nicht barrierefrei ist, ist offensichtlich, aber eben leider nicht zu ändern...
Mein Problem ist nun folgendes: ich habe zwei Zeilen à 5 Checkboxen. Es soll möglich sein, eine oder mehrere der ersten 4 Checkboxen pro Zeile anzuwählen. Beim Klick auf die fünfte Checkbox jedoch sollen alle eventuell markierten 4 Checkboxen dieser Zeile deselektiert werden. Umgekehrt soll ein Klick in eine der ersten 4 Checkboxen die eventuell markierte fünfte Checkbox deselektieren. Am Ende darf man also nicht Checkbox 1, 2, 3 oder 4 und Zelle 5 anwählen können, sondern nur eine oder mehrere Zellen aus den Checkboxen 1-4 oder ausschließlich Checkbox 5. Außerdem soll jede Zeile für sich betrachtet werden...
Wie gehe ich nun am besten vor? Ich müsste doch die ersten vier Checkboxen in ein Array packen und bei Klick auf Checkbox 5 müssten alle Elemente des Arrays deselektiert werden? Oder bedarf es da einer Schleife? Ich bin leider wirklich ratlos und hoffe auf den entscheidenden Hinweis...
<tr>
<td class="tabstop-0"></td>
<td class="tabstop-1"><span class="fontnumber-3">1</span></td>
<td class="tabstop-2"><span class="fontnumber-3">2</span></td>
<td class="tabstop-3"><span class="fontnumber-3">3</span></td>
<td class="tabstop-4"><span class="fontnumber-3">4</span></td>
<td class="tabstop-5"><span class="fontnumber-3">weiß nicht/keine Angabe</span></td>
</tr>
<tr>
<td><span class="fontnumber-0"> Online-Werbung</span></td>
<td class="tabstop-1 tabstop-nonzero formelementholder formelementholder-1 formelementholder-odd formelementplacement-1 formelementplacement-odd formelementplacement-first formelement-above-placement-first" colspan="5">
<table cellpadding="0" cellspacing="0" class="scale" width="100.0%">
<tbody>
<tr>
<td class="scaleholder">
<table width="100.0%" cellpadding="0" cellspacing="0" class="scaleitem">
<tbody>
<tr>
<td class="scalecell scalecell-odd scalecell-min scalecell-less scalecell1 scale-normal">
<input type="checkbox" name="answer0-1" value="1">
</td>
<td class="scalecell scalecell-even scalecell-less scalecell2 scale-normal">
<input type="checkbox" name="answer0-2" value="2">
</td>
<td class="scalecell scalecell-odd scalecell-middle scalecell3 scale-normal">
<input type="checkbox" name="answer0-3" value="3">
</td>
<td class="scalecell scalecell-even scalecell-more scalecell4 scale-normal">
<input type="checkbox" name="answer0-4" value="4">
</td>
<td class="scalecell scalecell-odd scalecell-max scalecell-more scalecell5 scale-normal">
<input type="checkbox" name="answer0-5" value="5">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="tabstop-0 formelementbefore formelementbefore-2 formelementbefore-even formelementbefore-placement-2 formelementbefore-placement-even"><span class="fontnumber-0"> Anzeigen in Tageszeitungen</span></td>
<td class="tabstop-1 tabstop-nonzero formelementholder formelementholder-2 formelementholder-even formelementplacement-2 formelementplacement-even" colspan="5">
<table cellpadding="0" cellspacing="0" class="scale" width="100.0%">
<tbody>
<tr>
<td class="scaleholder">
<table width="100.0%" cellpadding="0" cellspacing="0" class="scaleitem">
<tbody>
<tr>
<td class="scalecell scalecell-odd scalecell-min scalecell-less scalecell1 scale-normal">
<input type="checkbox" name="answer1-1" value="1">
</td>
<td class="scalecell scalecell-even scalecell-less scalecell2 scale-normal">
<input type="checkbox" name="answer1-2" value="2">
</td>
<td class="scalecell scalecell-odd scalecell-middle scalecell3 scale-normal">
<input type="checkbox" name="answer1-3" value="3">
</td>
<td class="scalecell scalecell-even scalecell-more scalecell4 scale-normal">
<input type="checkbox" name="answer1-4" value="4">
</td>
<td class="scalecell scalecell-odd scalecell-max scalecell-more scalecell5 scale-normal">
<input type="checkbox" name="answer1-5" value="5">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Vielen Dank schonmal im Voraus!