jeśli pole zaznaczone add klasa elementu nadrzędnego

Question

Mam tabeli z pola wyboru patrząc tak:

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

Co chcę zrobić jest, gdy jest zaznaczone pole wyboru, aby zastosować „wybrane” klasę „RTV- przełęcz".

if ($('.table-col').find(':checked')) { 
    $(this).parent().parent().addClass('selected'); 
} 

Spojrzałem na wiele stanowisku o podobnym rozwiązanie jak wyżej, ale nie wydaje się pracować dla mnie. Nie jestem pewien dlaczego, ale ten wskazuje na HTMLDocument, a nie na element.

(edycja) Na tej stronie zostaną zaznaczone pola wyboru, które chcę zastosować "wybrane". W komentarzach @cimmanon wspomniał o obsłudze zdarzeń. Muszę to sprawdzić. Dzięki za odpowiedzi!

(edit)

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

Więc po pageloads będą skrzynie oznaczone (myślę, że będą one zawsze zawierają zaznaczone = "zaznaczone" - nie jestem pewien) pola wyboru. To są te, które potrzebują nowego stylu. Nie ma potrzeby interakcji klikania ich i stosowania stylu, ale bardzo fajnie.

Answer 1

Spróbuj tego ...

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

Example

Pozdrowienia.

Answer 2

Nadaj checkbox nazwę tak jQuery można podpiąć do niego:

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

Answer 3

Można użyć .change() powiązać ze zdarzeniem change; następnie użyj .closest() i .toggleClass(), aby dodać lub usunąć nazwę klasy selected z elementu nadrzędnego.

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

See it here.

Answer 4

$ (this) będą odnosić się jedynie do wyboru (tak, że można przejść do jego dziadka, jak na kodzie), gdy jesteś w obsługi zdarzenia wywoływanego przez które przypisano go do elementu checkbox jako @imimmanon wskazał na.

Więc jeśli przypisałeś do tego pole wyboru .change(), $ (this) będzie odnosić się do twojego pola wyboru. Rzeczywiście można to zrobić w jednej linii, ponieważ prawdopodobnie chcesz, aby przełączyć „wybrane” klasę lub wyłączyć:

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

Inaczej $ (this) odnosi się do kontroli, które podniesione zdarzenie na przykład jeśli wykonujący ten kod w odpowiedzi na przycisk obsługi przycisku, $ (this) będzie odnosił się do przycisku.