仿购物车案例

JQ：



$(function(){
            //全选改变事件
            $(".checkAll").change(function(){
                // alert($(this).prop("checked"));
                $(".checkAll,.check").prop("checked",$(this).prop("checked"));
                if($(this).prop("checked")){
                    $(".check").parents(".trs").addClass("cs1");
                }else{
                    $(".check").parents(".trs").removeClass("cs1");
                }
            });
            //子勾选框的点击事件
            $(".check").click(function(){
                // alert($(".check:checked").length);
                if($(".check:checked").length==3){
                    $(".checkAll").prop("checked",true);
                }else{
                    $(".checkAll").prop("checked",false);
                }
                if($(this).prop("checked")){
                    $(this).parents(".trs").addClass("cs1");
                }else{
                    $(this).parents(".trs").removeClass("cs1");
                }
            })
            //数量点击增加,并改变总计金额的价钱
            $(".add").click(function(){
                //获取数量值
                var n=$(this).siblings(".num").val();
                n++;
                $(this).siblings(".num").val(n);//把每次+1的数量赋值给input的value
                //得到当前商品的单价，并把 ￥ 去掉
                var price=$(this).parent().siblings(".price").text().substr(1);
                //计算当前商品的总计金额，赋值给总计一列，并保留两位小数
                $(this).parent().siblings(".count").text("￥"+(price*n).toFixed(2));
                getSum();
            })
            //数量点击减少,并改变总计金额的价钱
            $(".reduce").click(function(){
                var n=$(this).siblings(".num").val();
                if(n==1){
                    return false;
                }else{
                    n--;
                }
                $(this).siblings(".num").val(n);
                var price=$(this).parent().siblings(".price").text().substr(1);
                $(this).parent().siblings(".count").text("￥"+(price*n).toFixed(2));
                getSum();
            })
            //总计金额根据输入的数量改变
            $(".num").change(function(){
                var n=$(this).val();//获取数量值
                //获取当前商品的单价
                var price=$(this).parent().siblings(".price").text().substr(1);
                //计算当前商品的总计金额，赋值给count,并保留两位小数
                $(this).parent().siblings(".count").text("￥"+(price*n).toFixed(2));
                getSum();
            });
            //总计和总额 ,在加减数量，手动调整数量处都用到，所以可以用函数，方便多处调用
            getSum();
            function getSum(){
                var counts=0;
                var prices=0;
                //计算总计
                $(".num").each(function(i,ele){
                    counts+=parseInt($(ele).val());
                })
                $(".nums").text(counts);
                //计算总金额
                $(".count").each(function(i,ele){
                    prices+=parseFloat(($(ele).text()).substr(1));
                })
                $(".prices").text("￥"+prices.toFixed(2));
                $(".check:checked").parents(".trs").addClass("cs1");
            }
            //点击删除按钮，删除当前商品
            $(".del").click(function(){
                $(this).parents("tr").remove();
                getSum();//每次删除完需要重新获取一下总计和总金额
            });
            //删除所有商品
            $(".removes").click(function(){
                $(".check").parents(".trs").remove();
                getSum();
            })
            //点击删除勾选的商品
            $(".dels").click(function(){
                $(".check:checked").parents(".trs").remove();
                getSum();
            })
        })


HTML：

<table cellspacing="0">
        <tr>
            <td><input type="checkbox" class="checkAll">全选</td>
            <td>商品</td>
            <td>单价</td>
            <td>数量</td>
            <td>总计</td>
            <td>操作</td>
        </tr>
        <tr class="trs">
            <td><input type="checkbox" class="check" checked></td>
            <td>青少年读物</td>
            <td class="price">￥12.60</td>
            <td><a class="reduce">-</a><input type="text" class="num" value="1"><a class="add">+</a></td>
            <td class="count">￥12.60</td>
            <td class="delete"><em class="del">删除</em></td>
        </tr>
        <tr class="trs">
            <td><input type="checkbox" class="check"></td>
            <td>情感书籍</td>
            <td class="price">￥24.80</td>
            <td><a class="reduce">-</a><input type="text" class="num" value="1"><a class="add">+</a></td>
            <td class="count">￥24.80</td>
            <td class="delete"><em class="del">删除</em></td>
        </tr>
        <tr class="trs">
            <td><input type="checkbox" class="check" checked></td>
            <td>心理读物</td>
            <td class="price">￥2.10</td>
            <td><a class="reduce">-</a><input type="text" class="num" value="2"><a class="add">+</a></td>
            <td class="count">￥4.20</td>
            <td class="delete"><em class="del">删除</em></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkAll">全选</td>
            <td><em class="dels">删除选中的商品</em></td>
            <td><em class="removes">清理购物车</em></td>
            <td colspan="3" class="zjs">
                <div class="zj">
                    已经选了  <span class="nums">1</span>  件商品
                        总计：<span class="prices">￥12.60</span>
                </div>
            </td>
        </tr>
    </table>