Hola webMASTERs
Estoy tratando de hacer una interfaz en donde el usuario seleccione un producto con un Checklist y elija una cantidad y se calcule el total...
Encontre un codigo en la web muy bueno... pero solo sirve para casos Estaticos...
por ejemplo mis checklist los dibujo dinamicamente dependiendo de cuantos productos esten en la base!
Dejo el codigo base q llevo para ver si alguien me puede ayudar...
Código HTML:
<html>
<head>
<title>Productos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilos.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function valorASumar(queCheck){
var check= document.getElementById(queCheck);
if(check.checked){
var cantidad= document.getElementById("cant"+queCheck);
var subtotal = check.value*cantidad.value;
subtotal = Math.round(subtotal*100)/100; //redondeo a dos decimales...
document.getElementById("t"+queCheck).value=subtotal;
return subtotal;
}
else{
document.getElementById("t"+queCheck).value = 0;
return 0;
}
}
function sumar(){
var total = 0;
total+=valorASumar("Producto1");
total+=valorASumar("Producto2");
total+=valorASumar("Producto3");
total+=valorASumar("Producto4");
return Math.round(total*100)/100; //redondeo a dos decimales...;
}
function ponerValor(){
document.getElementById("total").value = sumar();
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="100%" border="0">
<tr>
<td width="35%" align="right">Producto</td>
<td width="20%">Cantidad</td>
<td width="26%">Precio/un.</td>
<td width="19%">Total</td>
</tr>
<tr>
<td align="right">Producto1
<input onClick="ponerValor()" name="Producto1" type="checkbox" id="Producto1" value="100"></td>
<td><input onChange="ponerValor()" name="cantProducto1" type="text" id="cantProducto1" value="1" size="3" maxlength="3"></td>
<td>100</td>
<td><input name="t1" type="text" id="tProducto1" size="5" maxlength="5"></td>
</tr>
<tr>
<td align="right">Producto2
<input onClick="ponerValor()" name="Producto2" type="checkbox" id="Producto2" value="200"></td>
<td><input onChange="ponerValor()" name="cantProducto2" type="text" id="cantProducto2" value="1" size="3" maxlength="3"></td>
<td>200</td>
<td><input name="t2" type="text" id="tProducto2" size="5" maxlength="5"></td>
</tr>
<tr>
<td align="right">Producto3
<input onClick="ponerValor()" name="Producto3" type="checkbox" id="Producto3" value="300"></td>
<td><input onChange="ponerValor()" name="cantProducto3" type="text" id="cantProducto3" value="1" size="3" maxlength="3"></td>
<td>300</td>
<td><input name="t3" type="text" id="tProducto3" size="5" maxlength="5"></td>
</tr>
<tr>
<td align="right">Producto4
<input onClick="ponerValor()" name="Producto4" type="checkbox" id="Producto4" value="400"></td>
<td><input onChange="ponerValor()" name="cantProducto4" type="text" id="cantProducto4" value="1" size="3" maxlength="3"></td>
<td>400</td>
<td><input name="t4" type="text" id="tProducto4" size="5" maxlength="5"></td>
</tr>
<tr>
<td align="right"></td>
<td></td>
<td>Precio final</td>
<td><input name="t12" type="text" id="total" size="5" maxlength="5"></td>
</tr>
</table>
</form>
</body>
</html>
Saludos!