JavaScript Checkbox "togglen" mit JavaScript durch Klick auf "<tr>"

[andryyy]

Hi,

ich habe eine Tabelle, die am Ende eine Checkbox zeigt. Durch einen Klick auf die Reihe der Tabelle möchte ich die Checkbox "togglen", das klappt soweit auch. Allerdings funktioniert so der Klick auf die Checkbox selber nicht mehr. Grund wird sein, dass er den Klick auf die Zeile UND auf die Checkbox registriert: 2-fach toggle.

Habe das ganze mal auf jsFiddle dargestellt:
http://jsfiddle.net/ggFN7/

Ich habe so gar keine Ahnung von JavaScript und habe mir das eher zusammen gegooglet.

Die Anzahl der Reihen ist individuell und sie haben keine eindeutige ID, daher suche ich eine Lösung mit "firstInput".

Danke euch schon mal.

 

[T0a5tbr0t]

Wieso nicht einfach ein label Tag nutzen? Da macht der Browser automatisch einen "Link" zu dem entsprechenden Input-Feld. Dann braucht man nicht mal Javascript

<label>Klick  <input type="checkbox"></label>

 

[andryyy]

Kannst du das für die Tabelle im Link mal darstellen? Soll ja die komplette Reihe betreffen.

Am besten wäre ein jsfiddle Link.

 

[T0a5tbr0t]

Hmm, wenn es unbedingt eine Tabelle sein soll geht es nur über ein label pro Tabellenfeld

<tr>
<td><label for="check1">asd</label></td>
<td><label for="check1">asd</label></td>
<td><label for="check1">asd</label></td>
<td><input type="checkbox" id="check1"></td>
</tr>

Das ist zwar viel Markup funktioniert aber. Und ist beim Thema Semantik oder Barrierefreiheit auch schöner als eine Javascript-lösung.

 

[Hancock]

Ne Lösung komplett ohne Javascript und Tabellen:

<style>
.tab{
display:table;
}
.tab>label{
display:table-row;
}
.tab>label>p{
display: table-cell;
}
</style>
<div class="tab">
<label><p>asd<p>asd<p><Input type="Checkbox"></Label>
</div>

http://jsfiddle.net/R9uvP/

 

[Daaron]

@Hancock: In dem ersten Fiddle siehts aber etwas nach tabellarischen Daten aus, somit wäre <table> eben doch korrekt. Die Lösung von T0a5tbr0t sieht am besten aus, wobei mir grad nicht klar ist, ob man tatsächlich mehrere Label einem Control Element zuweisen darf....

Alternative Lösung für JS:
versteck die Checkbox (display: none) und erzeuge per JS in jeder Zeile am Ende noch ein <td> mehr, dass ne feste Größe hat und als Background-Image irgend ne hübsche Checkbox. Wenn du jetzt auf ne Zeile klickst, lässt du die Checkbox (verborgen) umschalten und änderst gleichzeitig die HG-Grafik der letzten Zelle in ne hübsche geklickte Checkbox.

Sowas funktioniert übrigens auch ohne JS, wenn man <label> verwendet, nur über CSS ...außer im Mobile Safari, der is da komisch.