6,jQuery 简易购物车

<!--HTML结构-->

        <button id="chkAll">全选</button>
        <button id="fx">反选</button>
        <!-- 1, -->
        <li class="li">
            <input type="checkbox"> 商品1 单价:<span class="jg">19.99</span>
            <button class="jie">-</button>
            <!--减-->
            <input type="text" class="txt1" value="0">
            <button class="jia">+</button>
            <!--加-->
            <span>小计:</span><span class="xiaoji">0.00</span>
        </li>
        <!-- 2, -->
        <li class="li">
            <input type="checkbox"> 商品1 单价:<span class="jg">29.99</span>
            <button class="jie">-</button>
            <!--减-->
            <input type="text" class="txt1" value="0">
            <button class="jia">+</button>
            <!--加-->
            <span>小计:</span><span class="xiaoji">0.00</span>
        </li>
        <!-- 3, -->
        <li class="li">
            <input type="checkbox"> 商品1 单价: <span class="jg">39.99</span>
            <button class="jie">-</button>
            <!--减-->
            <input type="text" class="txt1" value="0">
            <button class="jia">+</button>
            <!--加-->
            <span>小计:</span><span class="xiaoji">0.00</span>
        </li>

    样式课可自行引入
    <script src="../day js-18 jQuery/js/jquery.min.js"></script>

大佬勿喷

也有点小bug 

//js代码段

$(function () {
    // 设置全选
    $("#chkAll").click(function () {
        // console.log($(".chkAll"));
        $("input[type=checkbox]").prop("checked", true);
        // 总计
        $("P").find("span:eq(1)").text(($("li:eq(0)").find(".xiaoji").text())*1+($("li:eq(1)").find(".xiaoji").text())*1+1*($("li:eq(2)").find(".xiaoji").text()));
        // 总数量
        $("P").find("span:eq(0)").text(($("li:eq(0)").find(".txt1").val())*1+($("li:eq(1)").find(".txt1").val())*1+1*($("li:eq(2)").find(".txt1").val()));


        // console.log($("li:eq(1)").find(".xiaoji").text());
    });
    // 设置反选
    $("#fx").click(function () {
        $("input[type=checkbox]").each(function () {
            var flag = $(this).prop("checked");
            $(this).prop("checked", !flag)
        })
    })
    // 加
    $(".jia").click(function(){
        //获取兄弟元素文本框的值
        var n=$(this).siblings(".txt1").val();
        n++;
        $(this).siblings(".txt1").val(n);
        var price= $(this).parent().find(".jg").text();

        var total=  (price * n).toFixed(2);
        // console.log(total);
        // console.log($(this).parent().find(".xiaoji"));
        $(this).parent().find(".xiaoji").html(total);
    })
    // 减
    $(".jie").click(function(){
        var n=$(this).siblings(".txt1").val();
        if(n==0){
            return false;
        }
        n--;
        $(this).siblings(".txt1").val(n);
        var price= $(this).parent().find(".jg").text();

        var total= (price * n).toFixed(2);
        // console.log(total);
        // console.log($(this).parent().find(".xiaoji"));
        $(this).parent().find(".xiaoji").html(total);
    })
    //点击input 获取 数量价格
    $("li").on("click","input:eq(0)",function(){
        console.log($("li:eq(0)").find("input:eq(1)").val());
        // 数量
        $("p").find("span:eq(0)").text($("li:eq(0)").find("input:eq(1)").val()*1+$("li:eq(1)").find("input:eq(1)").val()*1+$("li:eq(2)").find("input:eq(1)").val()*1);
        // 价格
        $("p").find("span:eq(1)").text($("li:eq(0)").find(".xiaoji").text()*1+$("li:eq(1)").find(".xiaoji").text()*1+$("li:eq(2)").find(".xiaoji").text()*1);
    })
})