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 () {
  $('#img').hover(
     function () {
         $(this).attr('src', '/images/account/ws_145_hover.png');
      },
     function () {
         $(this).attr('src', '/images/account/ws_145.png');
      }
  );

  $("#img").click(function() {
     if(1) {
         $(this).attr("src", "/images/account/ws_145_checked.png");
         $("#w_interest").val("0");
     } else {
         $(this).attr("src", "/images/account/ws_145.png");
         $("#w_interest").val("1");
     }
  });
});

1. 画像をクリックするとチェック画像に変わります。ただし、マウスを離すと元の画像に変わります。チェックした画像のままであることを確認したい。

2. チェックボックスの入力をチェックすることを確認したいと思います。

3. ユーザーがチェックされた画像をもう一度クリックすると、チェックボックスの入力が選択解除されます。

これを実現するためにjqueryを修正するのを手伝ってもらえますか?

Answer 1

この例を参照してください: http://jsfiddle.net/tErvQ/

コード：

$('.imag_box img').hover(
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://placehold.it/150/000000/fbaf5d');
         }
      },
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://placehold.it/150/000000/ffffff');
         }
     }
  );


$(".imag_box img").click(function() {
    if($(this).next().val() !== "1") {
         $(this).attr("src", "http://placehold.it/150/000000/00ff18");
         $(this).next().val("1");
    } else {
         $(this).attr("src", "http://placehold.it/150/000000/ffffff");
         $(this).next().val("0");
    }
});

それがあなたが必要としていたものであることを願っています:)

フォームを送信している場合は、投稿でより適切に処理される可能性があるため、代わりにchecked属性を使用することをお勧めします。

Answer 2

それはタイプミスですかif（1）{

私はあなたがと比較する必要があると思います

if($("#w_interest").val() == 1)

Answer 3

これを試して：

$(document).ready(function () {
    var images = [
        '/images/account/ws_145.png',
        '/images/account/ws_145_hover.png'
    ];
    var $w_interest = $("#w_interest");
    var $img = $('#img');
    $img.hover(function () {
        $img.attr('src', images[1]);
    }, function () {
        if($w_interest.val() == "0") {
            $img.attr("src", images[0]);
        }
    });

    $img.click(function() {
        if($w_interest.val() == "1") {
            $img.attr("src", images[0]);
            $w_interest.val("0");
        } else {
            $img.attr("src", images[1]);
            $w_interest.val("1");
        }
    });
});