Antworten auf deine Fragen:
Neues Thema erstellen

jQuery: bei klick auf Tabellenzeile -> checkbox markieren

koma05

Aktives Mitglied

hallo.
habe eine simple tabelle bestehend aus 4 spalten:
zwischenablage025tfd.jpg


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:
Code:
    $("tr").hover( function(){

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

Myhar

Hat es drauf

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

Die wohl 'einfachste' Lösung ist wohl:
Code:
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

Aktives Mitglied

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"

Code:
//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

undefined

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:
PHP:
<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:
PHP:
    $('input').click( function(){
        if($(this).attr('checked')){
            $(this).removeAttr('checked');
        }else{
            $(this).attr('checked','checked')
        }
    });
 
Zuletzt bearbeitet:

koma05

Aktives Mitglied

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:
PHP:
<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:
PHP:
    $('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!!
 
Zuletzt bearbeitet:

koma05

Aktives Mitglied

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?

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

cebito

undefined

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

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

du könntest aber auch Klassen verteilen...
 

fakerer

Aktives Mitglied

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

müsste die Unterscheidung nicht auch mit

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

klappen?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.354
Mitglieder
67.534
Neuestes Mitglied
Mario Rossi-Munter
Oben