首先是一些细节：
我有4个图像占位符。 我有几个复选框。每个复选框都与图像相关联。 用户可以查看4个方框。
当用户点击复选框时，它会将其中一个图片占位符替换为与复选框相关联的图像。
用户勾选4个复选框后，其余的chexkbox将被禁用。
所以现在我们有4个图像占位符，其中填充了选中复选框中的图像。
这是我的问题发挥作用的地方。
如果用户决定取消选中一个框，我需要正确的占位符图像以返回其通用占位符图像。
因此，如果用户选中的4个复选框是1：Hammer 2：Screwdriver 3：Nails 4：Saw。那些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';
}
}
}
}