jquery - チェックボックスが選択されたときにjQueryがdivを強調表示する

Question

複数のセクションがあり、それぞれに対応するチェックボックスがあるページがあります。チェックボックスが選択されている場合、含まれている div を強調表示したいと思います (そして、色が徐々に消えていきます)。チェックボックスの選択が解除されている場合、ハイライトは表示されません。2 つの質問があります。jQuery で div を強調表示する最良の方法は何ですか? 選択解除ではなく、チェックボックスの選択のみでハイライトをトリガーするにはどうすればよいですか?

ありがとう

Answer 1

車輪を再発明する意味はないので、ハイライト効果についてはhttp://docs.jquery.com/UI/Effects/Highlightを使用してください (これにより、作業がずっと楽になります)。

チェックボックスの状態を確認するには、 を使用しますが.prop()、これ.is(':checked')も有効です。

ジャバスクリプト:

$(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');
    }
}