先说一些细节：
我有 4 个图像占位符。我有几个复选框。每个复选框都与一个图像相关联。用户可以勾选 4 个复选框。
当用户单击一个复选框时，它会用与该复选框相关联的图像替换其中一个图像占位符。
在用户选中 4 个复选框后，其余复选框将被禁用。
所以现在我们有 4 个图像占位符，其中填充了选中复选框中的图像。
这就是我的问题发挥作用的地方。
如果用户决定取消选中一个框，我需要正确的占位符图像才能返回到它的通用占位符图像。
因此，如果用户选中的 4 个复选框是 1：锤子 2：螺丝刀 3：钉子 4：锯子。这 4 个占位符图像将填充有锤子、螺丝刀、钉子和锯子。如果他们决定取消选中螺丝刀复选框，那么带有螺丝刀的占位符图像应切换到通用占位符图像。
我很难弄清楚如何做到这一点。
提前致谢！
function countChecked() {
var radioCandyCount = document.getElementsByName('HowManyCandies');
for (var i = 0, length = radioCandyCount.length; i < length; i++) {
if (radioCandyCount[i].checked) {
var a = radioCandyCount[i].value;
var b = "2";
var c = Number(a) + Number(b);
var n = $("input:checked").length;
document.getElementById("CandyCount").value = Number(c) - Number(n)
// 不起作用 ....此部分是将占位符图像恢复为其通用图像...不起作用
if (document.getElementById("CandyCount").value == 4) {
$('#Jar1').css("background-image", "url(/Images/SingleJar.png)");
$('#Jar2').css("background-image", "url(/Images/SingleJar.png)");
$('#Jar3').css("background-image", "url(/Images/SingleJar.png)");
$('#Jar4').css("background-image", "url(/Images/SingleJar.png)");
}
if (document.getElementById("CandyCount").value == 3) {
if ($(this).not(':checked')) {
var unChecked = this.value;
if ($('#Jar1').css("backgroundImage") == "url(\"/Images/" + unChecked + ".png\"" + ")");
{
$('#Jar1').css("background-image", "url(/Images/SingleJar.png)");
}
if ($('#Jar2').css("backgroundImage") == "url(\"/Images/" + unChecked + ".png\"" + ")");
{
$('#Jar2').css("background-image", "url(/Images/SingleJar.png)");
}
if ($('#Jar3').css("backgroundImage") == "url(\"/Images/" + unChecked + ".png\"" + ")");
{
$('#Jar3').css("background-image", "url(/Images/SingleJar.png)");
}
}
}
if (document.getElementById("CandyCount").value == 2) {
if ($(this).not(':checked')) {
var unChecked = this.value;
if ($('#Jar1').css("backgroundImage") == "url(\"/Images/" + unChecked + ".png\"" + ")");
{
$('#Jar1').css("background-image", "url(/Images/SingleJar.png)");
}
if ($('#Jar2').css("backgroundImage") == "url(\"/Images/" + unChecked + ".png\"" + ")");
{
$('#Jar2').css("background-image", "url(/Images/SingleJar.png)");
}
}
}
if (document.getElementById("CandyCount").value == 1) {
if ($(this).not(':checked')) {
var unChecked = this.value;
if ($('#Jar1').css("backgroundImage") == "url(\"/Images/" + unChecked + ".png\"" + ")");
{
$('#Jar1').css("background-image", "url(/SingleJar.png)");
}
}
}
// *****END**** THIS SECTION IS TO REVERT THE PLACE HOLDER IMAGES BACK TO ITS GENERIC IMAGE *****END****
// THIS SECTION CHANGES THE PLACE HOLDER IMAGE BASED ON THE ASSOCIATED CHECKBOX IMAGE
if (length == 3) {
if (document.getElementById("CandyCount").value == 3) {
$(':checkbox(:checked)')
if (this.checked) {
var CandyChoice = "url(" + "/Images/" + this.value + ".png )";
$('#Jar4').css("background-image", CandyChoice);
}
}
if (document.getElementById("CandyCount").value == 2) {
$(':checkbox(:checked)')
if (this.checked) {
var CandyChoice = "url(" + "/Images/" + this.value + ".png )";
$('#Jar3').css("background-image", CandyChoice);
}
}
if (document.getElementById("CandyCount").value == 1) {
$(':checkbox(:checked)')
if (this.checked) {
var CandyChoice = "url(" + "/Images/" + this.value + ".png )";
$('#Jar2').css("background-image", CandyChoice);
}
}
if (document.getElementById("CandyCount").value == 0) {
$(':checkbox(:checked)')
if (this.checked) {
var CandyChoice = "url(" + "/Images/" + this.value + ".png )";
$('#Jar1').css("background-image", CandyChoice);
}
}
}
// *****END**** THIS SECTION CHANGES THE PLACE HOLDER IMAGE BASED ON THE ASSOCIATED CHECKBOX IMAGE *****END****
if (n == c)
{
$(':checkbox:not(:checked)').prop('disabled', true);
document.getElementById('AddCart').style.display = 'inline';
$(document).scrollTop( $("#AddCart").offset().top );
$("#StepFourCheck").fadeIn('slow');
}
else
{
$(':checkbox:not(:checked)').prop('disabled', false);
document.getElementById('AddCart').style.display = 'none';
document.getElementById('StepFourCheck').style.display = 'none';
}
}
}
}