You could try this code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
table {
border : none;
border-collapse : collapse;
color : #708090;
width : 80%; }
th {
padding : .300em;
border-bottom : 1px solid #aaa;
border-top : 1px solid #aaa; }
td {
border-bottom : 1px solid #aaa;
background-color : #f5f5f5;
padding : .200em;
letter-spacing : 3px;
text-align : center;
vertical-align : middle; }
/* ]]> */
</style>
<script id="javascript1.5" type="text/javascript">
// <![CDATA[
var showPrice = function() {
var numspan = (( "getElementsByTagName" in document ) ? document.getElementsByTagName("span") : document.all.tags("span") );
var ids = this.id.match(/\d+/)[ 0 ];
var span = (( "getElementById" in document ) ? document.getElementById("tot" + ids ) : document.all[ "tot" + ids ] );
var overallAmount = (( "getElementById" in document ) ? document.getElementById("overall") : document.all.overall );
span.innerHTML = "";
var amt = this.value * 1;
var qty = (( "getElementById" in document ) ? document.getElementById("item" + ids ) : document.all[ "item" + ids ] ).value *1;
var total = "";
total = (( !qty ) ? 0 : (( qty ) * amt ));
if ( this.checked && qty ) {
span.innerHTML = "<span style=\"color : #E00;\">" + total + "</span>";
overallAmount.innerHTML = (( numspan["tot0"].innerText * 1 ) + numspan["tot1"].innerText * 1 );
return true; }
alert( "Please specify the quantity of selected ( item #" + (( ids * 1 ) + 1 ) + " )." );
this.checked = false;
return false;
};
var products = function() {
var form;
try {
form = document.forms.testform;
} catch( e ) {
form = (( "getElementById" in document ) ? document.getElementById("testform") : document.all.testform );
}
var oLen = form.elements.length;
for ( var x = 0; x < oLen; x++ ) {
if ( "addEventListener" in window ) {
if ( form.elements[ x ].type === "checkbox" ) {
form.elements[ x ].addEventListener( "click", showPrice, false );
continue
}
} else if ( "attachEvent" in window ) {
if ( form.elements[ x ].type === "checkbox" ) {
form.elements[ x ].attachEvent( "onclick", showPrice );
continue
}
} if ( form.elements[ x ].type === "checkbox" ) {
form.elements[ x ].onclick = showPrice;
continue;
}
}
};
window.onload = products;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="#" onsubmit="return false;">
<table id="testtable" frame="void" rules="none" summary="Javascript :: Live Demo!">
<tr>
<th>Add</th><th>Item</th><th>Qty.</th><th>Amount</th></tr>
<tr>
<td><input type="checkbox" id="chb0" name="chb0" value="1.25" /></td>
<td>Sample Item #1</td>
<td><input type="text" id="item0" name="item0" value="" size="6" maxlength="5" /></td>
<td><span id="tot0"></span></td>
</tr>
<tr>
<td><input type="checkbox" id="chb1" name="chb1" value="3.25" /></td>
<td>Sample Item #2</td>
<td><input type="text" id="item1" name="item1" value="" size="6" maxlength="5" /></td>
<td><span id="tot1"></span></td>
</tr>
<tr>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"></td>
<td style="background-color : #fff; border : none;"><span id="overall" style="color : #E00; font-weight : bold; border : none;"></span></td>
</tr>
</table>
</form>
</div>
</body>
</html>
hope it helps...
