jquery - 选中复选框时jQuery突出显示div

Question

我有一个包含几个部分的页面，每个部分都有一个相应的复选框。当一个复选框被选中时，我想突出显示包含的 div（并让颜色逐渐消失）。取消选中复选框时，不应突出显示。我有两个问题：让 jQuery 突出显示 div 的最佳方式是什么？如何触发仅选中复选框而不是取消选中的突出显示？

谢谢

Answer 1

重新发明轮子没有意义，因此对于高亮效果，请使用http://docs.jquery.com/UI/Effects/Highlight（这将使您的生活更轻松）。

然而，为了检查复选框的状态，使用.prop(),.is(':checked')也是有效的。

JAVASCRIPT：

$(document).ready(function(){
    $('input[name="checkbox"]').click(function(){
        if($(this).prop('checked'))
           $('div').eq($(this).parent().index()).effect("highlight", {}, 1000); 
    });
});

演示：http: //jsfiddle.net/dirtyd77/gmPtY/2/

Answer 2

就像是：

$(':checkbox').click(function() {
    if ($(this).is(':checked')) {
        $(this).closest('.parent-class').addClass('highlight');
    }
}