前端相关问题——总价和删除勾选项功能实现不了
 我想实现一个购物车功能,遇到的问题是总价和删除勾选项功能实现不了。请求各位大神帮忙看看

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table th, table td {
border-bottom: 1px solid #aaa;
padding: 8px 15px;
text-align: center;
}
thead > tr {
background: #6a6;
}
tbody > tr:nth-child(even) {
background: #efe;
}
tbody tr:nth-child(2){
line-height: 40px;
}
tfoot td {
text-align: right;
}
/*a {
text-decoration: none;
color: #000;
}*/

p{
float:right;
}
ul{
margin: 0 auto;
}
li{
list-style: none;
float:left;
margin:10px; 
}
</style>
</head>
<body>
<h1>练习:jQuery DOM操作和事件处理</h1>
<h3>购物车计算器</h3><br>
<button id="btAdd">添加新商品</button><br><br>
<table id="cart">
<thead>
<tr>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td id="price">3.5</td>
<td>
<input class=" btn1" type="button" id="subtract" value="-"/>
<input class=" input " type="button"id="num" value="1"/>
<input class=" btn2" type="button" id="add" value="+"/>
</td>
<td id="sum">7.0</td> 
<td><input name="subBox" class="listCheckBox" type="checkbox"> </td>
</tr>

</tbody>
</table>
<p id="delet">删除勾选项</p>
<br />
<ul>
<li >
<lable>全选</lable>
<input type="checkbox" id="checkAll">
</li>
<li>购物车总金额:<span id="total">3.5</span></li>
</ul>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
var p=$('#price').html();
//点击加按钮
$('#add').click(function(){
var n=$(this).parent().find('#num'); 
n.val(parseInt(n.val())+1);
total();
});
//点击减号按钮
$('#subtract').click(function(){
var n=$(this).parent().find('#num');
n.val(parseInt(n.val())-1);
if(parseInt(n.val())<1){ 
n.val(1);
}
total();
getTotal();
});
//小计
function total(){
var s=0;
s+=parseFloat(p*$('#num').val());
$("#sum").html(s); 
}
total();
//合计
function getTotal(){
var t=0;
var sum=$('#sum').innerHTML;
t+=sum;
$('#total').html(t);
}
getTotal();
//全选与反选
$("#checkAll").click(function() {
$('input[name="subBox"]').attr("checked",this.checked); 
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
});
//删除勾选项
$('#delet').click(function(){
var ch=$subBox.attr('checked');
$('#delet').prev().remove();
});
</script>

</body>
</html>
0

3个回答


        function getTotal() {
            var t = 0;
            var sum = parseFloat($('#sum').html());///.innerHTML;//dom和jq对象乱用,而且要转为数字
            t += sum;
            $('#total').html(t);
        }

        //点击加按钮
        $('#add').click(function () {
            var n = $(this).parent().find('#num');
            n.val(parseInt(n.val()) + 1);
            total();
            getTotal();////////////////
        });
        //删除勾选项
        $('#delet').click(function () {
            //var ch = $subBox.attr('checked');
            //$('#delet').prev().remove();
            $subBox.filter(':checked').closest('tr').remove();//////////
        });

而且你最好不要通过id来做,而是dom关系,要不又多条记录只能操作第一条,id不能重复

0

问题没有表达清楚,首先你要做啥,遇到啥问题了

0

不是特别清楚你想表达什么,大概理解为勾选的按钮不能选中或者取消,楼主可以参考下我的blog

-1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

4
pagination.tag 分页怎样使用啊?有没有一个完整的例子,从前端到后台的示例参考一下。
3
Plupload 前端预览大图片导致网页崩溃
9
请教前端大佬esayUI问题,怎么把一个href通过用户权限条件隐藏或者置为不可选择.....
8
请教前端大神 关于frameset中frame的跳转的问题
5
哇 react fetch 报错的问题,请求应该没错,因为换一个接口就可以正常请求
2
.net 将数据库表 转化为JSON respond回前端
9
.net 前端JS事件,响应C#后台。
6
Echarts前端图,地图的图标显示比例怎么调整。官网文档找不到在哪里,求前端朋友帮忙。
9
关于一个事件绑定的问题,不是on,click啥的 求高手
7
HTML5前端页面取值问题
3
前端向后端传递复杂json类型遇到的问题
6
前端如何动态生成网页
1
请教各位大神想做前端网页图表展示数据,利用web API方式调用后台spark程序返回结果的系统
4
ztree 前端树状结构。。。
1
请教一下前端大神们,IE浏览器js的调试能出来效果,直接刷新就不能
2
怎么能在屏幕最前端显示一行字体?
1
不知道哪位好心的大佬能帮小弟解决困扰了一天的问题,关于登录页面的PHP代码问题 心好累
24
关于select下拉框选择触发事件,死活触发不了~请大佬帮忙看下~
2
python相关:未选中文件,下载按钮可以点,而且会下载一个json文件
16
前端页面问题,请大佬提点...我是真的不会~