如果選中複選框添加類的父元素

我有一個複選框看起來像這樣的表：如果選中複選框添加類的父元素

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

當複選框被選中以應用「入選」類我想要做的是「表 - 山口」。

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

我看了很多文章，上面有類似的解決方案，但它似乎並不適合我。我不知道爲什麼，但此指向HTMLDocument不是元素。

（編輯）在這個頁面上會有標記的複選框，我想應用「selected」的複選框。關於@cimmanon的評論提到了事件處理。我需要看看這個。感謝您的答案！

（編輯）

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

所以pageloads後會有標記的盒子（我認爲他們將始終包含檢查= 「檢查」 - 不知道）複選框。這些是需要新風格的。沒有必要點擊它們並應用風格但非常酷的互動。

2013-01-22 user12345

似乎適合我工作嗎？勾選複選框以更改父級的樣式。 http://jsfiddle.net/b2uVV/ – mrtsherman

這個類是否應該在事件發生時應用（該框被選中）？如果是這樣，你有一個事件處理程序來捕捉行動？ – cimmanon

而不是兩個父母的電話，你可以做.closest（'。table-col'），但你的代碼是好的，我想。添加console.log語句以查看正在運行和調試的內容。 – Kansha

嘗試......

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

問候。

2013-01-22 21:22:54

一個較短的版本：http://jsfiddle.net/LE46Q/1/ - 編輯：你實際上是更加萬無一失，因爲它檢查檢查狀態。 – zakangelle

@ZakAngelle Thx不錯的版本。 –

但如果我不必應用更改事件，即如果它預先檢查數據庫的無線電?? ?? – user2906608

給您複選框名稱，以便jQuery的可以掛鉤它：

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

2013-01-22 21:23:14 tahdhaze09

您可以使用.change()綁定到change事件;然後使用.closest()和.toggleClass()來添加或刪除祖父母元素中的selected類名。

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

2013-01-22 21:25:56 Alexander

$（這）將僅涉及您的複選框（以便你可以去到它的祖父母，按您的代碼），當您通過所分配它調用的事件處理程序是複製到@cimmanon暗示的複選框元素。

因此，如果您將.change（）處理程序分配給您的複選框，$（this）將引用您的複選框。實際上，你可以做到這一點的一條線，因爲你可能需要打開或關閉的「選擇」類：

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

否則$（這）是指引發事件，例如控制，如果你正在執行此代碼響應按鈕單擊處理程序，$（this）將引用該按鈕。

2013-01-22 21:38:58

回答