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");
       }
    });

});

当用户在图像上移动鼠标指针时，图像会变为鼠标悬停在图像上。
当他或她点击图片时，它会变为已检查的图片。（当然，它会勾选复选框）

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

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

带有jquery的复选框图像表单

2 个答案: