我想制作一个复选框表单,该表单将鼠标悬停在图像上并使用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");
}
});
});
当我单击图像时,它会更改为选中的图像。但是,当我将鼠标移出时,它会更改为原始图像。我想确保它保持检查图像。
我想确保它选中复选框输入。
如果用户再次单击选中的图像,则会取消选择复选框输入。
你能帮我修复 jquery 来实现这一目标吗?
请参阅此示例: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");
}
});
希望这就是你需要的:)
改用选中的属性可能是一个更好的主意,因为如果您要提交表单,则在帖子中可能会更好地处理它。
试试这个:
$(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");
}
});
});
是 typo if(1){
我认为您应该与
if($("#w_interest").val() == 1)