steffen: Checkbox "checked" bei anklicken der Zeile Problem

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

  1. Hat jemand irgendeine Idee, wie ich das zum laufen bekomme?

    Ja, gut alt und bewährt: Nutze label Elemente.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. 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

      1. 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

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. 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:

          http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=http://de.selfhtml.org/html/formulare/strukturieren.htm#label

          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

          1. 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

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
      2. 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

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. 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

          1. 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

            --
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
            Der Valigator leibt diese Fische
  2. $("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"?

    1. 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&ouml;rt zu mir wie mein Name an der T&uuml;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>
      
      1. 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