Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2008-10-13
4
Medium Priority
?
935 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:Doomtomb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 16

Accepted Solution

by:
Peter Kwan earned 2000 total points
ID: 22701102
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
 
LVL 4

Expert Comment

by:sijishJohn
ID: 22701134
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
 

Author Closing Comment

by:Doomtomb
ID: 31406208
Simple fixes work the best!
0
 

Author Comment

by:Doomtomb
ID: 22702542
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question