Checkbox onclick (check it) hide and add price to total, onclick (uncheck it) show and remove price from total

My test page to show what I got so far is: www.buildmethebest.com/intel_customdesktop.php

Scroll down to the category "Extras"

I have 3 independent checkboxes. I want each checkbox to add a price to the total on checking it and remove the [ +price ] and then on unchecking it, it removes the price from the total and puts back the [ +price ].

Right now it only does adding the price to the total and removing the [ +price ] upon clicking the box regardless of whether you are checking it or unchecking it.

The onCheckItem function is located in scripts/prices.js

Included is first the html code of the checkboxes, then the javascript. THANK YOU :)
HTML CODE:
 
<input type="checkbox" name="CableManagement" onclick="onCheckItem(16,2);" onmouseover="document.getElementById('image_extras').src='images/cablemanagement.jpg'">
                    Professional Cable Management (Improve the look of your system while increasing airflow!)<span id='PriceLabel_16_2'> <b>[ +19 ]</b></span><br>
					<input type="checkbox" name="ArcticSilver" onclick="onCheckItem(17,2);" onmouseover="document.getElementById('image_extras').src='images/arctic silver_5.jpg'">
                    Arctic Silver 5 thermal compound applied to all heatsinks and CPU<span id='PriceLabel_17_2'> <b>[ +9 ]</b></span><br>
					<input type="checkbox" name="Overclocking" onclick="onCheckItem(18,2);" onmouseover="document.getElementById('image_extras').src='images/overclock.jpg'">
                    Overclocking  Overclock my CPU to highest stable frequency<span id='PriceLabel_18_2'> <b>[ +19 ]</b></span><br>
 
 
 
 
JAVASCRIPT CODE:
 
var CurrentPrice = 1237;
  var PriceComponent = new Array();
  PriceComponent['1'] = new Array(); // Case category
  PriceComponent['1']['1'] = 140;
  PriceComponent['1']['2'] = 160;
 ................................. (lots more variables not relevant to this problem)
 PriceComponent['16'] = new Array(); // Extras: Cable Management
  PriceComponent['16']['1'] = 0; // price to the user without it checked
  PriceComponent['16']['2'] = 19; // price to the user with it checked
  PriceComponent['17'] = new Array(); // Extras: Arctic Silver 5
  PriceComponent['17']['1'] = 0; // price to the user without it checked
  PriceComponent['17']['2'] = 9; // price to the user with it checked
  PriceComponent['18'] = new Array(); // Extras: Overclocking
  PriceComponent['18']['1'] = 0; // price to the user without it checked
  PriceComponent['18']['2'] = 19; // price to the user with it checked
 
  var Default = new Array();
  Default['1'] = '14';
................
  Default['16'] = '1';
  Default['17'] = '1';
  Default['18'] = '1';
 
  // this function appears in the oncheckitem function, just so you know what it does in case you were wondering
  function SetLayerText(sLayerId, sText) {
    document.getElementById(sLayerId).innerHTML = sText
  }
 
 
function onCheckItem(CatId,ItemId) {
	if (!this.checked) {
		SetLayerText("PriceLabel_" + CatId + "_" + ItemId, "");
		CurrentPrice += PriceComponent[CatId][ItemId];
		
	}
	else {
		var PriceDisplay = " <b>[ +" + PriceComponent[CatId][ItemId] + " ]</b>";
		SetLayerText("PriceLabel_" + CatId + "_" + ItemId, PriceDisplay);
		CurrentPrice -= PriceComponent[CatId][ItemId];
	}
	
	TotalPrice = " <b>[ " + CurrentPrice + " ]</b>";
	SetLayerText("TotalPriceLabel", TotalPrice);
    // Update Default Item
    Default[CatId] = ItemId;
}

Open in new window

DoomtombAsked:
Who is Participating?
 
Peter KwanConnect With a Mentor Analyst ProgrammerCommented:
The this.checked is undefined.

Following code may work for you:

Javascript code:
function onCheckItem(Item, CatId,ItemId) {
 if (Item.checked) {
                SetLayerText("PriceLabel_" + CatId + "_" + ItemId, "");
                CurrentPrice += PriceComponent[CatId][ItemId];
               
        }
        else {
                var PriceDisplay = " <b>[ +" + PriceComponent[CatId][ItemId] + " ]</b>";
                SetLayerText("PriceLabel_" + CatId + "_" + ItemId, PriceDisplay);
                CurrentPrice -= PriceComponent[CatId][ItemId];
        }
       
        TotalPrice = " <b>[ " + CurrentPrice + " ]</b>";
        SetLayerText("TotalPriceLabel", TotalPrice);
    // Update Default Item
    Default[CatId] = ItemId;

}

HTML code:

                    <input type="checkbox" name="CableManagement" onclick="onCheckItem(this,16,2);" onmouseover="document.getElementById('image_extras').src='images/cablemanagement.jpg'">
                    Professional Cable Management (Improve the look of your system while increasing airflow!)<span id='PriceLabel_16_2'> <b>[ +19 ]</b></span><br>
                              <input type="checkbox" name="ArcticSilver" onclick="onCheckItem(this,17,2);" onmouseover="document.getElementById('image_extras').src='images/arctic silver_5.jpg'">
                    Arctic Silver 5 thermal compound applied to all heatsinks and CPU<span id='PriceLabel_17_2'> <b>[ +9 ]</b></span><br>
                              <input type="checkbox" name="Overclocking" onclick="onCheckItem(this,18,2);" onmouseover="document.getElementById('image_extras').src='images/overclock.jpg'">
                    Overclocking  Overclock my CPU to highest stable frequency<span id='PriceLabel_18_2'> <b>[ +19 ]</b></span><br>
0
 
sijishJohnCommented:
hi Doomtomb,

change your javascript like this...
function onCheckItem(CatId,ItemId) 
{
    if (this.document.activeElement.checked) 
    {
        SetLayerText("PriceLabel_" + CatId + "_" + ItemId, "");
        CurrentPrice += PriceComponent[CatId][ItemId];                
    }
    else 
    {
        var PriceDisplay = " <b>[ +" + PriceComponent[CatId][ItemId] + " ]</b>";
        SetLayerText("PriceLabel_" + CatId + "_" + ItemId, PriceDisplay);
        CurrentPrice -= PriceComponent[CatId][ItemId];
    }
    
    TotalPrice = " <b>[ " + CurrentPrice + " ]</b>";
    SetLayerText("TotalPriceLabel", TotalPrice);
    // Update Default Item
    Default[CatId] = ItemId;
}

Open in new window

0
 
DoomtombAuthor Commented:
Simple fixes work the best!
0
 
DoomtombAuthor Commented:
I tried your code, sijishJohn, but for some reason it didn't work :/ (onclick event, it didn't do anything). pkwan's worked though.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.