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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
被选中的商品价格计入总金额
日考1121 a{ text-decoration: none; color: red; } 购物车 &nbsp;&nbsp;&nbsp;&nbsp;趣味工坊 {{item.title}} {{item.price*item.count|currency:"¥"}} {{it
原生JS实现购物车的添加删除,以及总价计算的功能
add方法,传入一个参数items。items是一个数组,数组元素为{name:String,price:Number}。通过add方法可以在在购物车列表新增商品 bind方法,实现点击删除,能够删除对应的列 同时,注意总计的商品总价应该符合逻辑计算,所有价钱应该保留小数点后2位。 名称价格操作
Inspector视图中脚本前面的勾选框消失或者自动取消的解决办法
PART1 以前我也遇到过这个问题,但是一直都没怎么注意,因为一般情况下也用不到。今天刚好有同事问我,我也就抽空看一下到底是为什么? 结果发现了一个奇葩的问题。。凡事脚本没有勾选项的,都是因为你的脚本没有Start方法。。如果你想让勾选框显示出来,把如下方法加入即可,不信你可以试试。嘿嘿。
JavaScript由单价、数量计算总价
650) this.width=650;" alt="" border="0" src="http://img1.51cto.com/attachment/201203/204422376.png" /> > html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/
jQuery实现购物车物品数量的加减并自动计算价格
http://www.csrcode.cn/article-3478-1.html                 jQuery实现购物车物品数量的加减并自动计算价格丨芯晴网页特效丨CsrCode.Cn             $(function(){     var t = $("#text_box");     $("#add").click(functi
购物车 结算功能,选中勾选状态可以显示所有选中的总价还有选中的数量,未选中不进行计算,删除功能
动态效果图如下: 代码如下: angular.module("myapp", []) .controller("mycon", ["$scope", function($scope) { //创建数据源  定义一个数组 $scope.shuzu = [{ "id": 0, "img": "img/head.jpg", "title":
购物车类的总价计算(可实时更新)
//购物车类的总价计算(可实时更新) function calTotal(){ //首先定义一个总价 var total = 0; //获取表格中的指定列 var tds = $(&quot;tbody tr :nth-child(7)&quot;); //遍历这个列中的所有内容 tds.each(function(){ //获取每一行的数据 ...
实现购物车结算功能:批量和全部删除,全选和反选,单价和总价,数量增减,页面隐藏和显示
需求: 要求:技术要求(html+css+angularjs) 1.  完成页面布局,如图1.1(button按钮可以用普通按钮) 2.Ø声明数据对象,初始化商品信息,数据自拟且不低于四条 3.  用ng-repaet指令将对象遍历并渲染到页面中 4.Ø点击”+”按钮输入框中的数量加1,同时可以计算出商品小计和购物车总价。同理,当点击”-”按钮时输入框中的数量减1,商品小计和购物车总
JQuery动态增加删除表格,计算总价
序号 物品名称 品牌 规格型号 数量 预算单价 预算总价 用途 相关操作 合计 小写 大写 JQuery   动态增加 //添加新记录 $("#bu").click(function(){ var max_line_num = $
ajax 实现订单商品数量的增减及订单的删除进行异步更新界面
由于在做答辩项目,做到购物车订单就自己研究了一下ajax进行页面异步更新,简单的写如下,等更加深入了解再进行更新 jsp界面           全选     店铺宝贝      获积分     单价(元)     数量     小计(元)     操作                           ${oc.order.oid}