2 cshmicky cshmicky 于 2017.01.11 04:00 提问

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

<!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>

3个回答

showbo
showbo   Ds   Rxr 2017.01.11 09:10

        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不能重复

u010715243
u010715243   2017.01.11 15:04

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

oXinLiang12
oXinLiang12   2017.01.11 09:08

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!