jQuery: bei klick auf Tabellenzeile -> checkbox markieren

[koma05]

hallo.
habe eine simple tabelle bestehend aus 4 spalten:

in der 1. spalte befindet sich eine checkbox.

nun soll, egal auf welcher spalte sich die maus befindet, mit einem klick die checkbox markiert oder demarkiert werden.

wo fang ich an?
danke für lösungsvorschläge


den hovereffekt auf eine zeile hab ich so umgesetzt:

    $("tr").hover( function(){

            $(this).css("background-color", "#86CEDC");
         
    },function(){
        $(this).css("background-color", "#ffffff");
    });

 

[fexx]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

Mit dem .toggle() – jQuery API Event vielleicht?

 

[Myhar]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

Die wohl 'einfachste' Lösung ist wohl:

jQuery('tr').click(function(){
   //Hier der Code zum an- und abwählen der Checkbox
});

Wenn es wenige tr Tags auf der Seite gibt, dann ist der Code wohl ausreichend. Bei größeren Tabellen würde ich empfehlen, das ganze mit event delegation zu lösen.
Dabei wird der click-Event nur auf die table gelegt und der click-Event muss nicht auf jede tr einzeln gelegt werden.

L. G.

 

[koma05]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

OK

habs nun folgendermaßen gelöst:
jede tr bekommt eine id z.b. "tr1234" und die entsprechende checkbox hat die id "cb1234"

//klick auf zeile -> checkbox markieren oder demakieren
    $("tr").click( function(){
        id = $(this).attr("id");
        var idneu = "#" + id.replace(/tr/g, "cb");
        if ($(idneu).attr("checked") == "checked") {
            $(idneu).removeAttr("checked");    
        }
        else {
            $(idneu).attr("checked", 'checked');
        }
    });

die sache funktioniert super!

nur es hat einen negativen nebeneffekt: man kann auf die checkbox selbst nicht mehr klicken. es passiert nichts bei einem klick auf die checkbox...
jemand ne idee wie man das gelöst bekommt?

 

[cebito]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

Statt tausen ID's zu vergeben, kannst du auch so auf die Checkbox in der Spalte zugreifen:

<script>
    $("tr").click( function(){
        if($('input',this).attr('checked')){
            $('input',this).removeAttr('checked');
        }else{
            $('input',this).attr('checked','checked')
        }
    });
</script>

Den Hover-Effekt kannst du auch per CSS erledigen.

Edith: den Negativeffekt kriegst so weg:

    $('input').click( function(){
        if($(this).attr('checked')){
            $(this).removeAttr('checked');
        }else{
            $(this).attr('checked','checked')
        }
    });

 

[koma05]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

Statt tausen ID's zu vergeben, kannst du auch so auf die Checkbox in der Spalte zugreifen:

<script>
    $("tr").click( function(){
        if($('input',this).attr('checked')){
            $('input',this).removeAttr('checked');
        }else{
            $('input',this).attr('checked','checked')
        }
    });
</script>

Den Hover-Effekt kannst du auch per CSS erledigen.

Edith: den Negativeffekt kriegst so weg:

    $('input').click( function(){
        if($(this).attr('checked')){
            $(this).removeAttr('checked');
        }else{
            $(this).attr('checked','checked')
        }
    });

hammer!! hab ich nicht gewusst. danke für die kurze und saubere lösung

PS: nebeneffekt eliminiert -> DANKE!!

 

[koma05]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

ich brauch doch nochmal hiiilllfffeeee....

und zwar hab ich nun in das formular noch 2 radiobuttons eingebaut. diese lassen sich nun auch nicht anklicken. was müsste hier geändert werden?

<input type="radio" name="beschriftung" value="1" />"Name" <input type="radio" name="beschriftung" value="2" checked="checked" />

 

[cebito]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

Die Frage hab ich gestern schon kommen sehen... Natürlich wirkt sich 'input' auf alle input aus. Willst du es spezieller, dann wieder so

    $('input','tr').click(function(){
        if($(this).attr('checked')){
            $(this).removeAttr('checked');
        }else{
            $(this).attr('checked','checked')
        }

du könntest aber auch Klassen verteilen...

 

[fakerer]

AW: jQuery: bei klick auf Tabellenzeile -> checkbox markieren

müsste die Unterscheidung nicht auch mit

$('input:radio')
$('input:checkbox')

klappen?