jquery - 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を付けて、イベントを画像に添付します。

このようなもの: http://jsfiddle.net/yB4rQ/

Answer 2

それ以外の：

if(this.checked)

書きます：

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