wenn Checkbox aktiviert Add-Klasse übergeordnete Element

Ich habe eine Tabelle mit Checkboxen wie folgt aussehen:wenn Checkbox aktiviert Add-Klasse übergeordnete Element

<td class="table-col" > 
    <div class="group-one" > 
    <input type="checkbox" /> 
    </div> 
</td>

Was ich tun möchte, ist, wenn das Kontrollkästchen aktiviert ist ein „ausgewählt“ Klasse gelten für „Tabellen- col ".

Ich schaute auf viele Post mit einer ähnlichen Lösung wie oben, aber es scheint nicht Arbeit für mich. Ich bin nicht sicher, warum aber dieser verweist auf HTMLDocument nicht das Element.

(bearbeiten) Auf dieser Seite wird es markierte Kontrollkästchen geben, die ich "ausgewählt" anwenden möchte. Auf Kommentaren erwähnt @cimmanon Event-Handling. Ich muss das nachsehen. Danke für die Antworten auch!

(edit)

<td class="table-col"> 
<div class="group-one"> 
    <input type="checkbox" checked="checked"/> 
</div> 
</td>

So, nachdem die Seitenzugriffe wird es gekennzeichneten Felder müssen ausgefüllt sein (ich glaube, sie werden immer enthalten checked = "checked" - nicht sicher) Kontrollkästchen. Dies sind diejenigen, die einen neuen Stil brauchen. Es gibt keine Notwendigkeit für die Interaktion von ihnen zu klicken und einen Stil anzuwenden, aber trotzdem sehr cool.

Quelle

2013-01-22 user12345

Scheint für mich gut zu funktionieren? Aktivieren Sie das Kontrollkästchen, um den Stil des Elternteils zu ändern. http://jsfiddle.net/b2uVV/ – mrtsherman

Soll diese Klasse angewendet werden, wenn ein Ereignis eintritt (die Box ist aktiviert)? Wenn ja, haben Sie einen Event-Handler, um die Aktion abzufangen? – cimmanon

statt zwei Elternanrufe können Sie .closes ('. Table-col') tun, aber Ihr Code ist in Ordnung, denke ich. Fügen Sie console.log-Anweisungen hinzu, um zu sehen, was von dort ausgeführt und debuggt wird. – Kansha

Try this ...

$(":checkbox").on('click', function(){ 
    $(this).parent().toggleClass("checked"); 
});

Example

Grüße.

Quelle

2013-01-22 21:22:54

Eine kürzere Version: http://jsfiddle.net/LE46Q/1/ - EDIT: Ihre ist eigentlich narrensicherer, da es überprüft überprüfter Zustand. – zakangelle

@ ZakAngele Thx nette Version. –

aber wenn ich nicht auf Änderung Ereignis anwenden muss, d. H. Wenn sein Radio Radio aus der Datenbank überprüft? – user2906608

Geben Sie Ihrem Checkbox einen Namen so jQuery es kann Haken:

$('input[name=foo]').is(':checked')

Quelle

2013-01-22 21:23:14 tahdhaze09

Sie .change() zum change Ereignis binden können; Verwenden Sie dann .closest() und .toggleClass(), um den Klassennamen selected aus dem Element "Großelternteil" hinzuzufügen oder zu entfernen.

$("input:checkbox").change(function(){ 
    $(this).closest(".table-col").toggleClass('selected', this.checked); 
});

See it here.

Quelle

2013-01-22 21:25:56 Alexander

$ (this) wird nur auf Ihre Kontrollkästchen beziehen (so dass Sie gehen können, um es Großeltern nach Ihrem Code), wenn Sie in einem Ereignishandler, indem sie aufgerufen sind zugewiesen zum Checkbox-Element, wie @cimmanon angedeutet hat.

Wenn Sie also den .change() - Handler Ihrem Kontrollkästchen zugewiesen haben, verweist $ (this) auf Ihr Kontrollkästchen. Sie können tatsächlich tun dies in einer Zeile, weil Sie wahrscheinlich umschalten wollen die „ausgewählt“ Klasse ein- oder ausgeschaltet: an die Steuerung bezieht sich

$(":checkbox").change(function() { 
    $(this).parent().parent().toggleClass('selected'); 
     });

Ansonsten $ (this), die das Ereignis beispielsweise ausgelöst, wenn Sie ausführen Dieser Code als Antwort auf einen Button-Klick-Handler, $ (this) bezieht sich auf die Schaltfläche.

Quelle

2013-01-22 21:38:58

wenn Checkbox aktiviert Add-Klasse übergeordnete Element

Antwort

Verwandte Themen