Javascript 更改所选内容以填充不需要的结果

我有两个输入。我不确定我做错了什么，但我只是试图显示与输入选择相关联的div

我现在遇到的问题是，如果选择了一个输入，控制台将显示两个输入都已选择。此外，标题

.pg选择标题
未显示正确的数据

为什么我的更改选择现在显示正确的数据


jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
$（'.calendar check'）。在（'change'，函数（）{
如果（$（“#cal-2年：选中”））{
$（'prev-2year'）。FadeBooltLoggle（$（'cal-2year:checked'）。长度==1；
console.log（'A selected'）；
$（'.pg selection title'）.html（'A selected'）；
};
如果（$（“#cal白板：选中”））{
$（“#上一个白板”）.FadeBoltogle（$（“#上一个白板：选中”）.length==1；
console.log（'B selected'）；
$（'.pg selection title'）.html（'B Selected'）；
};
});
.cal主题包装{
显示：无；
}


A.

B
问题在于，即使jQuery选择没有找到结果，也会返回一个对象。因此，您不能只是检查是否存在——您必须检查
length
属性以确保它确实找到了一些东西


jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
$（'.calendar check'）。在（'change'，函数（）{
如果（$（'#cal-2年：选中'）。长度>0）{
$（'prev-2year'）。FadeBooltLoggle（$（'cal-2year:checked'）。长度==1；
console.log（'A selected'）；
$（'.pg selection title'）.html（'A selected'）；
};
如果（$（'#cal白板：选中'）。长度>0）{
$（“#上一个白板”）.FadeBoltogle（$（“#上一个白板：选中”）.length==1；
console.log（'B selected'）；
$（'.pg selection title'）.html（'B Selected'）；
};
});
.cal主题包装{
显示：无；
}


A.

B
问题在于，即使jQuery选择没有找到结果，也会返回一个对象。因此，您不能只是检查是否存在——您必须检查
length
属性以确保它确实找到了一些东西


jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
$（'.calendar check'）。在（'change'，函数（）{
如果（$（'#cal-2年：选中'）。长度>0）{
$（'prev-2year'）。FadeBooltLoggle（$（'cal-2year:checked'）。长度==1；
console.log（'A selected'）；
$（'.pg selection title'）.html（'A selected'）；
};
如果（$（'#cal白板：选中'）。长度>0）{
$（“#上一个白板”）.FadeBoltogle（$（“#上一个白板：选中”）.length==1；
console.log（'B selected'）；
$（'.pg selection title'）.html（'B Selected'）；
};
});
.cal主题包装{
显示：无；
}


A.

B
我假设您还想在未选中div各自的复选框时重新隐藏div？始终将布尔值传递给隐藏/显示函数，无论是否选中它们

如果同时选择了这两个选项，您也可以重新考虑更改这两个选项的
.pg选择标题。由于div仅在选中该复选框时可见，因此您可能不需要动态更改文本


jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
$（'.calendar check'）。在（'change'，function（）上{
//根据是否选中隐藏或显示div
$（'prev-2year'）.fadeboltoggle（$（'cal-2year'）.is（'：checked'）；
$（'prev whiteboard'）.fadeboltogle（$（'cal whiteboard'）.is（'：checked'）；
如果（$（'#cal-2year'）。是（':checked'））{
console.log（'A selected'）；
//$（'.pg selection title'）.html（'A selected'）；
};
如果（$（'#cal whiteboard'）。是（':checked'））{
console.log（'B selected'）；
//$（'.pg selection title'）.html（'B Selected'）；
};
});
.cal主题包装{
显示：无；
}

选定的

A.
B选定

B
我假设您还想在未选中div各自的复选框时重新隐藏div？始终将布尔值传递给隐藏/显示函数，无论是否选中它们

如果同时选择了这两个选项，您也可以重新考虑更改这两个选项的
.pg选择标题。由于div仅在选中该复选框时可见，因此您可能不需要动态更改文本


jQuery.fn.fadeboltoggle=函数（bool）{
返回布尔？this.fadeIn（400）：this.fadeOut（400）；
}
$（'.calendar check'）。在（'change'，function（）上{
//根据是否选中隐藏或显示div
$（'prev-2year'）.fadeboltoggle（$（'cal-2year'）.is（'：checked'）；
$（'prev whiteboard'）.fadeboltogle（$（'cal whiteboard'）.is（'：checked'）；
如果（$（'#cal-2year'）。是（':checked'））{
console.log（'A selected'）；
//$（'.pg selection title'）.html（'A selected'）；
};
如果（$（'#cal whiteboard'）。是（':checked'））{
console.log（'B selected'）；
//$（'.pg selection title'）.html（'B Selected'）；
};
});
.cal主题包装{
显示：无；
}

选定的

A.
B选定

B
Gotcha。谢谢你的帮助！没问题！快乐编码！明白了。谢谢你的帮助！没问题！快乐编码！我正在分享的这段代码基本上就是我的示例。两者都应该是滑块。单击滑块图像时，应该会显示一个复选标记。选项A为滑块形式