jqueryを使用したチェックボックスの画像フォーム

Question

jqueryで画像上にマウスがあり、チェックされた画像の機能を持つチェックボックスフォームを作りたいと思います。

私は正常に機能しましたが、一緒に機能しませんでした。

ここは私のhtml形式です。ここで

<label for="w_interest"> 
    <img src="/images/account/w_select.png_img"/ style='cursor:pointer;'> 
    <input name="w_interest" type="checkbox" id="w_interest" style="display:none"> 
</label> 

は、ユーザが画像上にマウスに、画像上の画像の変化を、それらのマウスポインタを移動jqueryの

$(document).ready(function() { 
    $('#w_interest').hover(
    function() { 
     $('img', this).attr('src', '/images/account/w_select_hover.png'); 
    }, 
    function() { 
     $('img', this).attr('src', '/images/account/w_select.png'); 
    } 
); 

    $("#w_interest").change(function() { 
     if(this.checked) { 
      $(this).prev().attr("src", "/images/account/w_select_checked.png"); 
     } else { 
      $(this).prev().attr("src", "/images/account/w_select.png"); 
     } 
    }); 

}); 

1. あります。

2. イメージをクリックすると、チェックされたイメージに変わります。 （もちろん、チェックボックスをチェックします）

私はこれらの2つの機能を組み合わせて実現することができますか？

Answer 1

ホバーイベントは、非表示の入力フィールドに設定されているため、機能しません。

<input name="w_interest" type="checkbox" id="w_interest" style="display:none"> 

画像にホバー効果が欲しいと思いますか？イメージにIDを与え、作業をイメージに添付します。

このような何か：

Answer 2

の代わり：

if(this.checked) 

書き込み：一部が動作しない

if ($(this).is(':checked'))