Checkbox "checked" bei anklicken der Zeile Problem
steffen
- javascript
Hallo Forumleser,
so nachdem ich jetzt auf JQuery umgestellt habe, stehe ich vor einem weiteren Problem *cry*
Ich habe eine Tabelle, bei der in der ersten Zeile eine Checkbox ist. Auf klick in die Zeile wird die Checkbox aktiviert/deaktiviert. Klappt auch wunderbar, nur wenn ich jetzt direkt auf die Checkbox klicke habe ich 2 Click-Events.
Hab schon versucht das irgendwie abzufangen. Klappt aber leider nicht :(
Hier mal mein Beispiel, falls ich mich irgendwie unversändlich ausgedrückt habe.
<!DOCTYPE html>
<html>
<head>
<style>
table td { border: 1px black solid; padding: 7px;}
.selected { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<form>
<table>
<tr>
<td><input type="checkbox"></td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Text</td>
</tr>
</table>
</form>
<script>
$("table tr:has(td input:checkbox)").mousedown(function () {
if($(this).children().find(":checkbox").is(":checked")){
$(this).removeClass("selected");
}else{
$(this).addClass("selected");
}
$(this).children().find(":checkbox").click();
});
</script>
</body>
</html>
Hat jemand irgendeine Idee, wie ich das zum laufen bekomme?
Vielen Dank für jegliche Hilfe
Steffen
Hat jemand irgendeine Idee, wie ich das zum laufen bekomme?
Ja, gut alt und bewährt: Nutze label Elemente.
mfg Beat
Ja, gut alt und bewährt: Nutze label Elemente.
Mit Hilfe von Labels können Sie jedoch einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen.
Leider bringt es ziemlich wenig, wenn nur der Text anklickbar ist und man ein padding von 20px hat.
mfg Steffen
Hi,
Leider bringt es ziemlich wenig, wenn nur der Text anklickbar ist und man ein padding von 20px hat.
Noch weniger bringt es, wenn du dein Problem nicht nachvollziehbar beschreibst.
Wo siehst du bzgl. der Verwendung von Labels und dem Ausstatten dieser mit dem gewünschten Maß an padding ein Problem?
MfG ChrisB
Hallo ChrisB
Wo siehst du bzgl. der Verwendung von Labels und dem Ausstatten dieser mit dem gewünschten Maß an padding ein Problem?
Lt. selfhtml und dem Beispiel siehe:
Sind labels nur auf den Text möglich. Nicht zB auf ein tr. oder gar td.
Wenn ich nun ein td/td anklickbar haben möchte ist mir das mit label nich möglich, oder doch?
lg Steffen
Hi,
Wenn ich nun ein td/td anklickbar haben möchte ist mir das mit label nich möglich, oder doch?
Doch, wenn du das Label einfach so groß machst, dass es die komplette Zelle ausfüllt.
MfG ChrisB
Ja, gut alt und bewährt: Nutze label Elemente.
Mit Hilfe von Labels können Sie jedoch einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen.
Leider bringt es ziemlich wenig, wenn nur der Text anklickbar ist und man ein padding von 20px hat.
Von welchem Browser sprichst du?
mfg Beat
Hallo Beat,
Von welchem Browser sprichst du?
rede von Firefox oder kann ich http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=Labels auch an div/tr/td binden?
lg Steffen
rede von Firefox oder kann ich http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=Labels auch an div/tr/td binden?
Du hast ein Selfhtml Beispiel verlinkt. Dieses demonstriert ein Formular in einer Tabelle. Warum nimmst du dir dieses nicht zu Gemüte?
mfg Beat
$("table tr:has(td input:checkbox)").mousedown(function () {
if($(this).children().find(":checkbox").is(":checked")){
Wozu soll das gut sein?
Warum nicht "table td input:checkbox:checked"?
Hallo suite,
$("table tr:has(td input:checkbox)").mousedown(function () { if($(this).children().find(":checkbox").is(":checked")){
Wozu soll das gut sein?
Warum nicht "table td input:checkbox:checked"?
das ist deshalb so, weil die funktion nur wenn eine checkbox enthalten ist angewendet wird und bei der if Anweisung zwar
if($("table td input:checkbox:checked"))
schreiben könntest, aber immer true rauskommt.
lg steffen
obriges true problembeispiel:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>Label für Elemente</title>
<style type="text/css">
label { cursor:pointer; }
</style>
</head>
<body>
<h1>Meine Beschriftung gehört zu mir wie mein Name an der Tür!</h1>
<form>
<fieldset>
<legend>Formular</legend>
<table>
<tr>
<td>Vorname:</td>
<td><input type="checkbox"></td>
</tr>
</table>
</fieldset>
</form>
<script>
~~~~~~javascript
$(document).ready(function() {
$("table tr:has(td input:checkbox)").mousedown(function () {
if($("table td input:checkbox:checked")){
alert("checked");
}else{
alert("not checked");
}
$(this).children().find(":checkbox").click();
});
});
~~~~~~html
</script>
</body>
</html>
if($("table td input:checkbox:checked"))
schreiben könntest, aber immer true rauskommt.
length schon versucht?
ein vergleich ob length > 0 ist, bringt mehr erfolg