61,126
社区成员
发帖
与我相关
我的任务
分享选中复选框后，文本框里为什么赋值总是 0 （不累加）呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在线书店</title>
<script language="javascript">
var s = ""; // 全局变量“s”，存放已勾选的书籍列表。
var tot = 0; // 全局变量“tot”，存放已购买商品的总价，
// 最后点击“我要买”时显示在“总价”文本框中。
function buy() { // 点击各复选框时，计算出几本书的合计，显示在“合计”文本框中
var bookchecked = new Array(); // 存放“复选框”组（书名）的变量
var price = new Array(); // 存放“单价”组的变量
bookchecked = document.bookstore.bookchecked;
price = document.bookstore.price;
for(var i = 0; i < bookchecked.length; i++) {
if(bookchecked[i].checked == "true") { // 如果用户勾选某商品，依次记录并计算合计
s += bookchecked[i].value;
tot += price[i].value;
}
}
document.bookstore.sum.value = tot;
}
function disPostage() { // 选择邮寄方式时，将邮费显示在“邮费”文本框中
}
function order() { // 点击“我要买”按钮时，
// 首先将商品总价显示在“总价”文本框中
// ，然后弹出确认对话框
// 确认对话框中显示，您已选择的商品和商品总价
// 点击“确定”，显示购买成功页面
}
</script>
<style type="text/css">
<!--
td { /* 设置单元格里的文字大小 */
font-size:15px;
}
hr { /* 粉红色虚线的样式 */
border: 1px;
border: dashed;
color: #ff00ff;
}
.myclass { /* 设置需要的字体大小和实线细边框的样式 */
font-size:14px;
border:1px solid;
}
-->
</style>
</head>
<body>
<form name="bookstore">
<table width="0" height="303" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#ffe500">
<td height="56" colspan="11"><img src="../../gif10/shop.gif" width="54" height="54" />您的购物车</td>
</tr>
<tr bgcolor="#c9e495">
<td colspan="3" align="center">宝贝名称</td>
<td colspan="2">单价（元）</td>
<td width="52" align="center">支付宝</td>
<td width="61" align="center">所在地</td>
<td width="93" align="center">剩余时间</td>
</tr>
<tr>
<td width="32" height="43"><input name="bookchecked" type="checkbox" class="myclass" value="天下有贼" onClick="buy()" /></td>
<td width="90" align="center"><img src="../../jpg10/11.jpg" width="57" height="70" /></td>
<td width="110">天下有贼</td>
<td width="21"> </td>
<td width="124"><input name="price" type="text" class="myclass" id="price" value="35.50" size="11" readonly /></td>
<td align="center"><img src="../../gif10/zhifubao.gif" width="16" height="16" /></td>
<td align="center">北京</td>
<td align="center">9分钟</td>
</tr>
<tr>
<td height="14" colspan="8"><hr /></td>
</tr>
<tr>
<td height="52"><input name="bookchecked" type="checkbox" class="myclass" value="麻辣恋人" onClick="buy()" /></td>
<td align="center"><img src="../../jpg10/13.jpg" width="62" height="70" /></td>
<td>麻辣恋人</td>
<td> </td>
<td><input name="price" type="text" class="myclass" id="price" value="58.00" size="11" readonly /></td>
<td align="center"><img src="../../gif10/zhifubao.gif" alt=" " width="16" height="16" /></td>
<td align="center">上海</td>
<td align="center">14分钟</td>
</tr>
<tr>
<td height="14" colspan="8"><hr /></td>
</tr>
<tr>
<td height="54"><input name="bookchecked" type="checkbox" class="myclass" value="天亮说晚安" onClick="buy()" /></td>
<td align="center"><img src="../../jpg10/14.jpg" width="62" height="70" /></td>
<td>天亮说晚安</td>
<td> </td>
<td><input name="price" type="text" class="myclass" id="price" value="98.00" size="11" readonly /></td>
<td align="center"><img src="../../gif10/zhifubao.gif" alt=" " width="16" height="16" /></td>
<td align="center">深圳</td>
<td align="center">25分钟</td>
</tr>
<tr>
<td height="14" colspan="8"><hr /></td>
</tr>
<tr>
<td height="21" colspan="2" align="center">邮寄方式</td>
<td align="center">邮费（￥）</td>
<td> </td>
<td align="center">合计（￥）</td>
<td colspan="2" align="center">总价（￥）</td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><select name="mail" id="mail" onChange="disPostage()">
<option value="default">请选择运送方式</option>
<option value="0.08">普通平信</option>
<option value="0.20">航空通信</option>
<option value="0.10">报价挂号</option>
<option value="0.15">回执海运</option>
</select></td>
<td align="center"><input name="postage" type="text" class="myclass" id="postage" value="0.00" size="11" readonly />
元 </td>
<td align="center">+</td>
<td><input name="sum" type="text" class="myclass" id="sum" size="11" readonly />
元 =</td>
<td colspan="2" align="center"><input name="tot" type="text" class="myclass" id="tot" value="0.00" size="11" readonly />
元</td>
<td>
<input name="buyButton" type="button" id="buyButton" value=" 我 要 买 " onClick="order()" /> </td>
</tr>
</table>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Quinn2 2010-12-20
- 打赏
- 举报
如果楼主用jquery来实现这个需求，就会变的很简单。
<input name="bookchecked" type="checkbox" price="98.00" class="myclass" value="天亮说晚安" />//在每个复习框上加上一个price，然后给上对应的价格。这样方便自己取值操作！
$(document).ready(function () {
var Zongprice = 0.00;//用来保存总价格
//跟多选框加上点击事件
$("input[type='checkbox']").bind("click", function () {
//转换一下，进行加操作，如果不转换，只会是字符串的累加，
var zhi = parseFloat(this.price);//获取当前对应的价格
if (this.checked == true) {
Zongprice += zhi;
}
else {
Zongprice = Zongprice - zhi;
}
//alert(Zongprice);
$("#sum").val(Zongprice);
});
});
<input name="bookchecked" type="checkbox" price="98.00" class="myclass" value="天亮说晚安" />//在每个复习框上加上一个price，然后给上对应的价格。这样方便自己取值操作！
$(document).ready(function () {
var Zongprice = 0.00;//用来保存总价格
//跟多选框加上点击事件
$("input[type='checkbox']").bind("click", function () {
//转换一下，进行加操作，如果不转换，只会是字符串的累加，
var zhi = parseFloat(this.price);//获取当前对应的价格
if (this.checked == true) {
Zongprice += zhi;
}
else {
Zongprice = Zongprice - zhi;
}
//alert(Zongprice);
$("#sum").val(Zongprice);
});
});
Quinn2 2010-12-20
- 打赏
- 举报
[Quote=引用 1 楼 liang800518 的回复:]
因为“if(bookchecked[i].checked == "true") {”
中的true，不该加""号
[/Quote]
2. tot += parseFloat（ price[i].value）;需要转换一下，要不然值就不会计算，只会累加！
看了一下，你的判断还没完善，如果取消，还需要把值减去！
因为“if(bookchecked[i].checked == "true") {”
中的true，不该加""号
[/Quote]
2. tot += parseFloat（ price[i].value）;需要转换一下，要不然值就不会计算，只会累加！
看了一下，你的判断还没完善，如果取消，还需要把值减去！
liang800518 2010-12-20
- 打赏
- 举报
[Quote=引用 3 楼 hb_yanhu 的回复:]
如果楼主用jquery来实现这个需求，就会变的很简单。
<input name="bookchecked" type="checkbox" price="98.00" class="myclass" value="天亮说晚安" />//在每个复习框上加上一个price，然后给上对应的价格。这样方便自己取值操作！
$(document).ready(function () {
……
[/Quote]
看来jquery的逻辑更清晰！虽然没学过，呵呵！谢谢了！
如果楼主用jquery来实现这个需求，就会变的很简单。
<input name="bookchecked" type="checkbox" price="98.00" class="myclass" value="天亮说晚安" />//在每个复习框上加上一个price，然后给上对应的价格。这样方便自己取值操作！
$(document).ready(function () {
……
[/Quote]
看来jquery的逻辑更清晰！虽然没学过，呵呵！谢谢了！
liang800518 2010-12-20
- 打赏
- 举报
[Quote=引用 2 楼 hb_yanhu 的回复:]
引用 1 楼 liang800518 的回复:
因为“if(bookchecked[i].checked == "true") {”
中的true，不该加""号
2. tot += parseFloat（ price[i].value）;需要转换一下，要不然值就不会计算，只会累加！
看了一下，你的判断还没完善，如果取消，还需要把值减去！
[/Quote]
1.tot += parseFloat（ price[i].value）;已改，谢谢！
2.“如果取消”已完善，在函数开始时，把两个全局变量都清空了，
即“s = "";tot = 0;”，这样每点一次复选框都会重新计算已购买的物品和“合计”了，
这一块没有问题了，谢谢！
引用 1 楼 liang800518 的回复:
因为“if(bookchecked[i].checked == "true") {”
中的true，不该加""号
2. tot += parseFloat（ price[i].value）;需要转换一下，要不然值就不会计算，只会累加！
看了一下，你的判断还没完善，如果取消，还需要把值减去！
[/Quote]
1.tot += parseFloat（ price[i].value）;已改，谢谢！
2.“如果取消”已完善，在函数开始时，把两个全局变量都清空了，
即“s = "";tot = 0;”，这样每点一次复选框都会重新计算已购买的物品和“合计”了，
这一块没有问题了，谢谢！
liang800518 2010-12-19
- 打赏
- 举报
因为“if(bookchecked[i].checked == "true") {”
中的true，不该加""号
中的true，不该加""号
