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. 当他或她单击图像时，它会变为选中图像。（当然，它检查复选框）

你能帮我结合这两个功能来实现它吗？

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') )