« »

This JavaScript is just a simple checkbox calculator. Works great as a shopping cart. Values for the checkboxes are defined in the .js code.

Label: Checkbox calculator

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script>
function load()
{
window.status = "Made by Ville Leivo 15.07.2002"
}

function count()
{
var item1price = 100;
var item2price = 100;
var item3price = 100;
var item4price = 100;
 
 // kortti
 if (calc.item1.checked){
   var witem1 = document.calc.item1.value = item1price;
 } else {
   var witem1 = document.calc.item1.value = 0;
 }

 if (calc.item2.checked){
   var witem2 = document.calc.item2.value = item2price;
 } else {
   var witem2 = document.calc.item2.value = 0;
 }

 // www-sivut
 if (calc.item3.checked) {
   var witem3 = document.calc.item3.value = item3price;
 } else {
   var witem3 = document.calc.item3.value = 0;
 }
 if (calc.item4.checked) {
   var witem4 = document.calc.item4.value = item4price;
 } else {
   var witem4 = document.calc.item4.value = 0;
 }
 document.calc.pay.value = witem1 + witem2 + witem3 + witem4;
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

  <form name="calc" method="post">
 <table width="450" border="0" cellpadding="3">
  <tbody><tr>
   <td colspan="2"><span class="normalText"><h4>Checkbox calculator</h4></span></td>
  </tr>
  <tr>
   <th bgcolor="#ffffff" width="50%" align="left"><span class="whiteText">Item</span></th>
   <th bgcolor="#ffffff" width="50%" align="right"><span class="whiteText">

	Select</span></th>
  </tr>
  <tr>
   <td bgcolor="#cccccc" colspan="2"><span class="normalText"><b>Item group 1</b></span></td>
  </tr>
  <tr>
   <td bgcolor="#eeeeee"><span class="normalText">Item 1.1</span></td>

   <td bgcolor="#eeeeee" align="right">
   <input type="checkbox" name="item1" size="10" value="ON"></td>
  </tr>
  <tr>
   <td bgcolor="#eeeeee"><span class="normalText">Item 1.2</span></td>
   <td bgcolor="#eeeeee" align="right">
   <input type="checkbox" name="item2" size="10" value="ON"></td>
  </tr>

  <tr>
   <td bgcolor="#cccccc" colspan="2"><span class="normalText"><b>Item group 2</b></span></td>
  </tr>
  <tr>
   <td bgcolor="#eeeeee"><span class="normalText">Item 2.1</span></td>
   <td bgcolor="#eeeeee" align="right">
   <input type="checkbox" name="item3" size="10" value="ON"></td>
  </tr>

  <tr>
   <td bgcolor="#eeeeee"><span class="normalText">Item 2.2</span></td>
   <td bgcolor="#eeeeee" align="right">
   <input type="checkbox" name="item4" size="10" value="ON"></td>
  </tr> 
  <tr>
   <td bgcolor="#cccccc" colspan="2" align="right"><span class="normalText">
	Price $</span><input type="text" name="pay" size="10" style="border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: tahoma; font-size: 8pt;"></td>

  </tr>
  <tr>
   <td bgcolor="#eeeeee" align="center"></td>
   <td bgcolor="#eeeeee" align="right"><input type="button" onclick="count()" value="Calculate" style="border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: tahoma; font-size: 8pt;">&nbsp;<input type="reset" value="Reset" style="border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: tahoma; font-size: 8pt;"></td>
  </tr>
 </tbody></table>
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->