Javascript 基于复选框获取要显示的图像：选中

我创建了一个函数

fadeboltoggle

，它根据布尔值淡入淡出

我添加了代码，使我的复选框像单选按钮一样工作。然后我创建了一个变量，将限制设置为1

limitCal

（我的实际代码需要复选框，因此无法使用无线电输入）。这很好用

不起作用的是，我不知道如何在不再选择输入时使图像不显示

有人知道我做错了什么吗

jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
var limitCal=1；
$（'.calendar check'）。在（'change'，function（）上{
$（'.calendar check'）.prop（'checked'，false）；
$（this.prop（'checked'，true）；
如果（！this.checked | |$（'.calendar check:checked'）.length我已经精简了您的代码。请检查是否适合您

您想取消选中复选框吗


$（'.calendar check'）。在（'change'，function（）上{
$（'.calendar check'）.parent（）.find（'img'）.fadeOut（）；
$（'.calendar check'）.not（this）.prop（'checked'，false）；
$（'.calendar check:checked'）.parent（）.find（'img'）.fadeIn（）；
})；
。选中标记img{
显示：无；
}

A.
B
C
我已经精简了您的代码。请检查是否适合您

您想取消选中复选框吗


$（'.calendar check'）。在（'change'，function（）上{
$（'.calendar check'）.parent（）.find（'img'）.fadeOut（）；
$（'.calendar check'）.not（this）.prop（'checked'，false）；
$（'.calendar check:checked'）.parent（）.find（'img'）.fadeIn（）；
})；
。选中标记img{
显示：无；
}

A.
B
C
您当前的代码只会在刚刚选中的复选框对应的图像上调用
.fadeboltoggle（）
。此时
此.checked
为
true
，因此当前图像会根据需要淡入。但您没有代码从先前的复选框淡出图像

这里有一种方法可以做到这一点，一路上简化代码（注意，对于这段代码，您并不真正需要
.fadeboltoggle（）
，因为它的参数总是硬编码的，所以您可以只使用
.fadeOut（）
和
.fadeIn（）
，但我保留了您的函数）：


jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
var limitCal=1；
$（'.calendar check'）。在（'change'，function（）上{
$（'.calendar check'）。非（此）//选择*其他*复选框
.prop（'checked'，false）//取消选中它们
.closest（'.product wrap'）//选择它们的包装器
.find（'.checkmark img'）//查找他们的图像
.fadeboltogle（false）；//将它们淡出
this.checked=true；//选中当前复选框
$（this）.closest（'.product wrap'）//获取当前包装器
.find（'.checkmark img'）//查找当前图像
.fadeboltogle（true）；//淡入
})；
。选中标记img{
显示：无；
}

A.
B
C
您当前的代码只会在刚刚选中的复选框对应的图像上调用
.fadeboltoggle（）
。此时
此.checked
为
true
，因此当前图像会根据需要淡入。但您没有代码从先前的复选框淡出图像

这里有一种方法可以做到这一点，一路上简化代码（注意，对于这段代码，您并不真正需要
.fadeboltoggle（）
，因为它的参数总是硬编码的，所以您可以只使用
.fadeOut（）
和
.fadeIn（）
，但我保留了您的函数）：


jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
var limitCal=1；
$（'.calendar check'）。在（'change'，function（）上{
$（'.calendar check'）。非（此）//选择*其他*复选框
.prop（'checked'，false）//取消选中它们
.closest（'.product wrap'）//选择它们的包装器
.find（'.checkmark img'）//查找他们的图像
.fadeboltogle（false）；//将它们淡出
this.checked=true；//选中当前复选框
$（this）.closest（'.product wrap'）//获取当前包装器
.find（'.checkmark img'）//查找当前图像
.fadeboltogle（true）；//淡入
})；
。选中标记img{
显示：无；
}

A.
B
C
这个。选中的
将始终是
真的
，因为您刚刚将其设置为
真的
。因此您显示当前复选框的图像，但没有代码隐藏以前选中的复选框的图像。@nnnn我不确定还要将其设置为什么。如果我这样做，
。FadeBooltOGLE（“：checked”）
它仍然做同样的事情。
这个。选中的
将始终是
真的
，因为您刚刚将它设置为
真的
。因此您显示了当前复选框的图像，但没有代码隐藏以前选中的复选框的图像。@nnnnnn我不确定还要将它设置为什么。如果我这样做，
.fadolteboggle（“：checked”）
它仍然可以做同样的事情。感谢您的编辑解释序列！这太完美了。我感谢您的帮助！我尝试在另一个部分这样做，但它根本不会显示图像？知道为什么吗？您忘了包含淡入淡出功能。（您应该在控制台中看到一个错误。）我没有耐心把你的函数复制到小提琴上，但在这里它与standa一起工作