定位表格內的複選框

Question

我有一個表格，我試圖用jQuery來定位複選框。我想單擊一個單獨的td中的複選框，然後更改該td的背景顏色，但我似乎無法完全鎖定複選框。這是我的表的TR（它有更多的TD的我只包括兩個用於此錯誤。

<tr class="sources"> 
    <td><a href="#">Single Life Annuity</a></td> 
    <td> 
    <div class="left"><input type="checkbox"></div> 
    <div class="right"> 
     <span class="relval">100%</span> 
     <span class="benyou">$517.00</span> 
     <span class="benben">$0</span> 
    </div> 
    </td> 
    <td> 
    <div class="left"><input type="checkbox"></div> 
    <div class="right"> 
     <span class="relval">98%</span> 
     <span class="benyou">$2,916.00</span> 
     <span class="benben">$0</span> 
    </div> 
    </td> 
</tr> 

這是我使用查找複選框的。我使用的是的console.log以確保jQuery的我發現該複選框，但在本質上會使用addClass(".active");

$(".sources td").click(function(e) 
{ 
    $(this).parent().find('input:checkbox').attr('checked', 'checked'); 
    console.log('you got it!'); 
}); 

任何幫助將提前偉大的！謝謝。

Answer 1

$('input[type="checkbox"]').click(function() { 
    if($(this).is(':checked')) { 
     $(this).parent().parent().addClass('active'); 
    } else { 
     $(this).parent().parent().removeClass('active'); 
    } 
}); 

Answer 2

使用你的榜樣（這勢必會在表格單元格點擊），這將選擇該單元格並應用紅色背景：

$(this).css('background','red'); 

jsFiddle example

如果您想綁定到複選框單擊事件，試試這個：

$(".sources td input").click(function (e) { 
    $(this).parent().find('input:checkbox').attr('checked', 'checked'); 
    $(this).closest('td').css('background','red'); 
    console.log('you got it!'); 
}); 

jsFiddle example

Answer 3

你可以人所以請嘗試使用.prop（）方法。

$(this).parent().find('input:checkbox').prop("checked", true); 

http://api.jquery.com/prop/

Answer 4

根據需要：DEMO

$('input[type="checkbox"]').click(function() { 
    if($(this).is(':checked')) { 
     $(this).parent().parent().css('background','red'); 
    } else { 
     $(this).parent().parent().css('background','white'); 
    } 
}); 

其他方式，作品被點擊<td>任何地方：DEMO

$(".sources td").click(function (e) { 
    if ($(this).find('input:checkbox').is(':checked')) { 
     $(this).find('input:checkbox').attr('checked', false); 
     $(this).closest('td').css('background','white'); 
    } 
    else 
    { 
     $(this).find('input:checkbox').prop('checked', 'checked'); 
     $(this).closest('td').css('background','red'); 
    } 
});