<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="__PUBLIC__/jquery-1.10.1.js"></script>
</head>
<body>
<table width="600" border="1">
    <tr align="center">
        <td><input type="checkbox" id="checkall"></td>
        <td>编号</td>
        <td>名字</td>
        <td>数目</td>
        <td>单价</td>
        <td>小计</td>
    </tr>
    <foreach name="arr" item="v">
    <tr align="center">
        <td><input type="checkbox" id="check_{$v.id}" class="check" value="{$v.id}"></td>
        <td>{$v['id']}</td>
        <td>{$v['goods_name']}</td>
        <td><button onclick="jian('{$v.id}')">-</button> <span id="num_{$v.id}">{$v['goods_num']}</span> <button onclick="jia('{$v.id}')">+</button></td>
        <td><span id="price_{$v.id}">{$v['goods_price']}</span></td>
        <td><span id="totol_{$v.id}" class="xtotol">{$v['goods_num']*$v['goods_price']}</span></td>
    </tr>
    </foreach>
    <tr>
        <td colspan="6" align="right">
            总计:<span id="totolprice">0</span>
        </td>
    </tr>
</table>
</body>
</html>
<script>

    function jia(id){
       var num = $('#num_'+id).text();//获取加之前的数量
       var  new_num = parseInt(num) + 1;//加1
        $('#num_'+id).text(new_num);  //把新数量塞进text中
        var totol = $('#num_'+id).text() * $("#price_"+id).text();//算出当前总价
        $("#totol_"+id).text(totol);//把当前总价塞进text中
        $("#check_"+id).prop("checked","checked");//点击加号之后默认选中该按钮

        var b = 0;
        //找到所有选中的按钮 遍历它
     $(".check:checked").each(function(){
      var ids = $(this).val();
         //所有选中的按钮中的小计进行相加
        b += parseFloat($('#totol_'+ids).text());
     })
        //把所有选中的小计总和塞进text中
        $("#totolprice").text(b);
       
        //判断按钮是否已被全部选中 全部选中就给全选也自动选中
        var ch = true;
    $(".check").each(function(){
        if(!($(this).is(":checked"))){
            //如果有未选中的就false
           ch = false;
        }
    })
        if(ch){
            //如果有一个没选中就不走该if就不能给全选自动选中
            $("#checkall").prop("checked","checked");
        }
    }


    function jian(id){
        var num = $('#num_'+id).text();
        if( num > 1){
            var  new_num = parseInt(num) - 1;
        }
        $('#num_'+id).text(new_num);
        var totol = $('#num_'+id).text() * $("#price_"+id).text();
        $("#totol_"+id).text(totol);
        $("#check_"+id).prop("checked","checked");
        var b = 0;
        $(".check:checked").each(function(){
            var ids = $(this).val();
            b += parseFloat($('#totol_'+ids).text());
        })
        $("#totolprice").text(b);

        var ch = true;
        $(".check").each(function(){
            if(!($(this).is(":checked"))){
                ch = false;
            }
        })
        if(ch){
            $("#checkall").prop("checked","checked");
        }else{
            $("#checkall").removeAttr("checked");
        }
    }
    //当点击全选的时候
    $("#checkall").click(function(){
        var all  = $('#checkall').is(":checked");//判断全选按钮是否已被选中
        var b = 0;
        if(all){
            //all 是ture 和 false  这里是未选中 则让所有的按钮自动选中
            $(".check").prop('checked','checked');
            $(".xtotol").each(function(){
                //计算所有小计的总和
               b += parseFloat($(this).text());
            })
            //塞进text中
            $("#totolprice").text(b);
        }else{
            //这里是已经选中 则让所有的按钮取消选中
            $(".check").removeAttr('checked');
            $("#totolprice").text(0);
        }
    })



    //当点击按钮的时候
    $(".check").click(function () {
        var ch = true;
        //判断所有的按钮是否有被选中的
        $(".check").each(function(){
            if(!($(this).is(":checked"))){
                ch = false;
            }
        })
        if(ch){
            $("#checkall").prop("checked","checked");
        }else{
            $("#checkall").removeAttr("checked");
        }
        var b = 0;
      $(".check:checked").each(function () {
         var id = $(this).val();
          b += parseFloat($("#totol_"+id).text());
      })
        $("#totolprice").text(b);
    })
</script>