关于购物车的多层复选全选

<style>
    #query_project .div_buttons {
        border-bottom: 1px dashed #cacaca;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

        #query_project .div_buttons a.verify.selected {
            background: #00b195;
        }

        #query_project .div_buttons a.verify {
            height: 25px;
            margin-right: 4px;
            line-height: 25px;
            font-size: 12px;
            padding: 0px 8px;
            border-radius: 0px;
            background: #CdCDCD;
            color: white;
            display: inline-block;
             60px;
            text-align: center;
        }

            #query_project .div_buttons a.verify:hover {
                background: #00b195;
                color: #fff;
            }

    .lesson .lesson-desc .lesson-xq {
        margin-left: 6px;
        margin-bottom: 5px;
        display: block;
    }

    .x-paging-right {
        margin-right: 17px;
        float: none;
        text-align: center;
    }

        .x-paging-right li a {
            padding: 6px 12px;
        }

        .x-paging-right li.x-paging-active a {
            background: #00b195;
        }

        .x-paging-right li a, .x-paging-right li span {
            color: #00b195;
        }

            .x-paging-right li a:hover {
                background: #00b195;
            }

    .lesson {
        height: 210px;
    }

    .lesson-position {
        position: relative;
    }

    .tip-bmk {
        position: absolute;
        background: url($!jc.themePath/img/tip.png) no-repeat 0px 9px;
        display: block;
         87px;
        height: 93px;
        top: -11px;
        left: -3px;
    }

    .tip-mk {
        position: absolute;
        background: url($!jc.themePath/img/tip.png) no-repeat 0px -99px;
        display: block;
         87px;
        height: 93px;
        top: -11px;
        left: -3px;
    }

    .order-title {
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #e4e4e4;
        background: #f5f5f5;
        border-bottom: 1px solid #e4e4e4;
        background: #f5f5f5;
    }

        .order-title ul li {
            float: left;
            display: inline;
            font-size: 14px;
            color: #808080;
            font-weight: bold;
             25%;
            text-align: center;
        }

    .item-box .item-name label {
        color: #404040;
        font-weight: bold;
        margin-left: 5px;
        padding: 15px 5px;
    }

    .item-course {
        background: #f5f5f5;
    }

        .item-course li {
            height: 81px;
            line-height: 81px;
            border-bottom: 1px solid #e4e4e4;
        }

            .item-course li span {
                display: inline-block;
                font-weight: bold;
            }

            .item-course li .c-name {
                 25%;
                text-align: center;
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                vertical-align: top;
            }

            .item-course li span.c-money {
                 25%;
                color: #ff4400;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                vertical-align: top;
                text-align: center;
            }

            .item-course li a.delete {
                display: inline-block;
                 20%;
                text-align: center;
            }

                .item-course li a.delete span {
                    vertical-align: top;
                    background: url(../themes/default/img/icon.png) no-repeat -4px 0px;
                     15px;
                    height: 30px;
                    margin-top: 30px;
                }

                .item-course li a.delete:hover span {
                    background: url(../themes/default/img/icon.png) no-repeat -4px -34px;
                }

    .price-box {
        height: 50px;
        line-height: 50px;
        background-color: #e5e5e5;
        position: fixed;
        bottom: 70px;
         953px;
        margin-left: -10px;
    }

        .price-box .price-left label {
            margin-right: 30px;
            float: left;
            height: 50px;
            line-height: 50px;
            margin-left: 10px;
        }

    .deleteall:hover {
        color: #f00;
    }

    .price-box .price-right {
        float: right;
    }

        .price-box .price-right span {
            margin-right: 10px;
        }

            .price-box .price-right span em {
                font-size: 16px;
                color: #ff4400;
                font-weight: bold;
                margin: 0 5px;
                font-style: normal;
            }

        .price-box .price-right .settlement {
            background-color: #B0B0B0;
            font-size: 18px;
            padding: 13px 35px;
            color: #fff;
        }

            .price-box .price-right .settlement:hover {
                background-color: #00b195;
            }

    #query_project .gformbox .g2 {
         170px;
    }

        #query_project .gformbox .g2 input {
            display: inline-block;
            padding: 4px;
            font-size: 13px;
            line-height: 22px;
            color: #555555;
            border: 1px solid #ccc;
        }

        #query_project .gformbox .g2 select {
            display: inline-block;
            padding: 4px;
            font-size: 13px;
            line-height: 22px;
            color: #555555;
            border: 1px solid #ccc;
        }

    .gform .g1 {
        font-size: 14px;
    }

    .order-title label {
        margin-top: 10px;
        font-size: 14px;
        font-weight: bold;
    }

    .shopping-box input {
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 4px;
    }

        .shopping-box input.checkedbyall {
            float: left;
            margin-top: 2px;
            margin-left: 10px;
        }

    .course-img-box {
         25%;
        overflow: hidden;
        float: left;
        height: 49px;
        margin-top: 19px;
    }

    .price-left {
        float: left;
        line-height: 50px;
        height: 50px;
    }

    #footer {
        position: fixed;
        left: 0px;
        bottom: 0px;
        height: 70px;
         100%;
        z-index: 99;
        background: #f2f2f2;
        padding: 0px;
        line-height: 70px;
        margin: 0px;
    }

    .lesson-wrapper {
        margin-bottom: 110px;
    }
</style>

<form id="query_project" action='$!jc.url("ajax-shopcar-list")' class="gform" method="post">
    <input type="hidden" name="type" value="" />
    <input type="hidden" name="projectType" value="0" />
    <div class="query clearfix">
        <div class="gformbox">
            <label>
                <span class="g1">项目名称:</span>
                <span class="g2">
                    <input type="text" name="projectName" />
                </span>
            </label>
        </div>
        <div class="gformbox">
            <label>
                <span class="g1">课程名称:</span>
                <span class="g2">
                    <input type="text" name="courseName" />
                </span>
            </label>
        </div>
        <div class="gformbox">
            <label>
                <span class="g2">
                    <button type="submit">查询</button>
                </span>
            </label>
        </div>

    </div>
    <div class="order-title">
        <ul class="clearfix">
            <li class="checkbutton">
                <label>
                    <input type="checkbox" class="am-checkbox">全选</label>
            </li>
            <li class="course">课程名称</li>
            <li class="money">金额</li>
            <li class="operation">操作</li>
        </ul>
    </div>
    <div class="lesson-wrapper clearfix">
    </div>
    <div class="price-box clearfix">
        <div class="price-left">
            <label>
                <input type="checkbox" class="am-checkbox" />全选
            </label>
            <a href="javascript:void(0);" class="deleteall">移除</a>
        </div>
        <div class="price-right">
            <span>已选课程<em><span id="CourseNum">0</span></em>个</span>
            <span>合计：<em>&yen;<span id="Money">0</span></em></span>
            <a href="javascript:void(0);" class="settlement" data-clicked="false">结算</a>
        </div>
    </div>
</form>


<script type="text/html" id="TABLE">

    <div class="content-info shopping-box" >
            {{if list && list.length > 0}}
                {{each list as item i}}
        <div class="order-box" data-projectid="{{item.ProjectId}}">
            <div class="order-info">
                <div class="item-box">
                    <div class="item-name">
                        <label>
                            <input type="checkbox" class="checkbyproject" data-projectid="{{item.ProjectId}}" value="item.ProjectId" />项目：{{item.ProjectName}}
                        </label>
                    </div>
                    <ul class="item-course clearfix">
                        {{each item.Courselist as Course j}}
                                            <li class="clearfix">
                                                <div class="course-img-box" data-id="{{Course.Id}}">
                                                    <input type="checkbox" class="checkedbyall" name="checkCourse" data-projectid="{{Course.ProjectId}}" data-money="{{Course.Money}}" data-id="{{Course.Id}}" data-courseopenid="{{Course.CourseOpenId}}" />
                                                    <input type="hidden" name="shopcarid" value="{{Course.Id}}">
                                                    {{if Course.CourseOpenId}}
                                                        <img src='$!jc.url("~design/api/getCourseCover?courseOpenId={{Course.CourseOpenId}}")' width="81" height="49">
                                                    {{else}}
                                                         <img src='../themes/default/img/wxm.png' width="81" height="49">
                                                    {{/if}}
                                                </div>

                                                <span class="c-name">{{Course.CourseName}}</span>
                                                <span class="c-name c-money">&yen;{{Course.Money}}</span>
                                                <a href="javascript:void(0);" class="delete" title="移除" data-id="{{Course.Id}}"><span>&nbsp;</span></a>
                                            </li>
                        {{/each}}
                    </ul>
                </div>
            </div>
        </div>
        {{/each}}
           {{else}}
                <div class="content-info">
                    <div class="no-content">
                        <div class="no-text">
                            <p class="no-c">暂无购物车记录</p>
                            <p class="no-e">NO RECORD</p>
                        </div>
                    </div>
                </div>
        {{/if}}

    </div>
    <div class="clearfix"></div>
    <div class="x-paging-container"></div>
</script>
<script id="JESUAN" type="text/html">
</script>

<JC:Include runat="server" Js="/js/template.js,/js/plugins/jquery.form.js,/js/plugins/jquery.paging.js,/js/plugins/moment.js,/js/shopcar/shopcar.js" />

$(function () {
    var form = $('#query_project'),
                    projectid = [];;


    //shopcar = '/studentstudio/shopcar';
    shopcar = '/shopcar';
    var shopcar = {
        urls: {
            //getAllCourse: shopcar + '/getallCourse', //获取项目下课程总参数
            calculate: shopcar + '/calculate',
            deletebyid: shopcar + '/delete',
        },
    }

    //top全选
    allChecktop = $('.order-title .am-checkbox').show(),
    //end全选
    allCheckend = $('.price-left .am-checkbox').show(),

    //项目前面checkbox
    checkbyproject = $('.item-name .checkbyproject').show(),


    //每个checkbox全选
    itemCheck = $('div.content-info .checkedbyall');



    allChecktop.prop('checked', false);
    allCheckend.prop('checked', false);
    itemCheck.prop('checked', false);
    checkbyproject.prop('checked', false);

    //点击上面的全选
    allChecktop.click(function () {
        var checked = allChecktop.prop('checked');
        $('div.content-info .checkedbyall').prop("checked", checked);
        $('div.content-info .checkbyproject').prop("checked", checked);
        getAmount();
        allCheckend.prop('checked', checked);
    });
    //点击下面的全选
    allCheckend.click(function () {
        var checked = allCheckend.prop('checked');
        $('div.content-info .checkedbyall').prop("checked", checked);
        $('div.content-info .checkbyproject').prop("checked", checked);
        getAmount();
        allChecktop.prop('checked', checked);
    });

    checkone = function () {
        $('div.content-info .checkedbyall').click(function (i) {
            var parentDiv = $(this).parents('div.order-box');
            var checkbyproject = $(".checkbyproject", parentDiv);
            if ($(".checkedbyall", parentDiv).length == $(".checkedbyall:checked", parentDiv).length) {
                checkbyproject.prop("checked", true);
            }
            else {
                checkbyproject.prop("checked", false);
            }
            getAmount();
            checktopendall();
        });

    },

    getCount = function (val) {
        var checknum = 0;
        var allnum = 0;
        var result = false;
        $('div.content-info .checkedbyall').each(function (i) {
            if ($(this).data("projectid") == val) {
                allnum++;
            }
            if ($(this).prop('checked') == true && $(this).data("projectid") == val) {
                checknum++;
            }
        });
        if (allnum == checknum) {
            result = true;
        }
        return result;
    }



    checktopendall = function () {
        var num = 0;
        $('div.content-info .checkedbyall').each(function (i, e) {
            if ($(this).prop('checked')) {
                num++;
            }
        });
        allChecktop.prop("checked", $('.checkedbyall').length == num ? true : false);
        allCheckend.prop("checked", $('.checkedbyall').length == num ? true : false);
    }

    check = function () {
        //每个项目的全选
        $('.content-info .checkbyproject').click(function (i) {
            var checked = $(this).prop('checked');
            var parentDiv = $(this).parents('div.order-box');
            var checkedbyall = $(".checkedbyall", parentDiv);
            checkedbyall.prop("checked", checked);
            getAmount();
            checktopendall();
        });

    },

    getAmount = function () {
        var Money = 0;
        var CourseNum = 0;
        $(".item-course input").each(function (i) {
            if ($(this).prop("checked")) {
                Money += $(this).data("money");
                CourseNum += 1;
            }
        });
        Money = Money.toFixed(2);
        $("#Money").html(Money);
        $("#CourseNum").html(CourseNum);
    }




    /*结算操作*/
    jiesuan = function () {
        $(".settlement").on('click', function (e) {
            var _this = shopcar;
            var data = [];

            $('input[name=checkCourse]').each(function (i, e) {
                if ($(e).prop('checked')) {
                    var row = {};
                    row.projectid = $(e).data("projectid");
                    row.courseopenid = $(e).data("courseopenid");
                    row.money = $(e).data("money");
                    data.push(row);
                }
            });
            if (data.length == 0) {
                alert("请选择要结算的课程!");
                return;
            }
            //处理json数据 方便传到后台
            var settlementinfo = JSON.stringify(data);
            if ($(this).data("clicked")) { return false; }
            $(this).data("clicked", true);
            jQuery.post($('head').data('vp2') + 'ajax-shopcar-calculate', { settlementinfo: settlementinfo }, function (r) {
                if (r.code < 0) {
                    return false;
                    alert(r.msg);
                }
                if (r.code > 0 & r.Amount > 0) {
                    location.href = "/financial/html/content/pay?orderNumber=" + r.orderNumber;
                }
                else {
                    location.reload();
                }
                form.submit();
            }, "json");

            return;
        });
    }




    deletebyids = function () {

        $(".delete").click(function () {
            if (!confirm('确认移除？')) return false;
            var id = $(this).data("id");
            var ids = [];
            ids[0] = id;
            jQuery.post($('head').data('vp2') + 'ajax-shopcar-delete', { ids: ids }, function (r) {
                if (r.code > 0) {
                    alert(r.msg);
                }
                form.submit();
            });
        });
        getAmount();
        allChecktop.prop("checked", false);
        allCheckend.prop('checked', false);
    }
    deleteall = function () {
        $(".deleteall").click(function () {
            if (!confirm('确认移除？')) return false;
            var _this = shopcar;
            var ids = [];
            $(".item-course input").each(function (i) {
                if ($(this).prop("checked")) {
                    ids.push($(this).data('id'));
                }
            });
            if (ids.length == 0) {
                alert("请选择要移除的课程!");
                return;
            };
            jQuery.post($('head').data('vp2') + 'ajax-shopcar-delete', { ids: ids }, function (r) {
                alert(r.msg);
                form.submit();
            });
        });
        getAmount();
    }

    template.helper('format_date', function (date) {

        if (!date) return '未设置';

        return moment(date).format('YYYY/MM/DD HH:mm:ss');
    });

    form.gform({
        onSuccess: function (r) {

            if (!handleException(r)) return false;

            if (r.code < 0) {
                alert(r.msg || '发生未知错误，请刷新页面后尝试！');
                return false;
            }
            //渲染表格
            $('.lesson-wrapper.clearfix', form).html(template('TABLE', r));
            //绑定分页信息s
            r.paging.show_left_info = false;
            $('.x-paging-container', form).paging(r.paging);
            check();
            deletebyids();
            checkone();
            return false;
        },
        callback: function (form) {
            $('button', form).button();
            jQuery.fn.gform.working = false;
            deleteall();
            jiesuan();
            form.submit();
        }
    });
});

主要处理了多个项目的全选和复选以及结算金额的操作。

处理的思路是使用模块化的思想。