最初にいくつかの詳細:
私は4つの画像プレースホルダーを持っています。私はいくつかのチェックボックスを持っています。各チェックボックスは画像に関連付けられています。ユーザーは 4 つのボックスにチェックを入れることができます。
ユーザーがチェックボックスをクリックすると、画像プレースホルダーの 1 つがチェックボックスに関連付けられた画像に置き換えられます。
ユーザーが 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';
}
}
}
}