解决checkbox点击选中问题

通过2种方式来处理
1是直接通过元素布局
2是通过jquery的append方法来实现，因为append的元素，是异步的，通过query查找元素添加点击事件就失效了

通过手动布局

<div class="my-course">
        <div class="my-course-left">
            <input type="checkbox" class="course-check">
        </div>
        <div class="my-course-right">
            <div class="my-course-title line-limit-length">
                初二数学 利用“数形结合思想” 初二数形结合思想
                初二数学 利用“数形结合思想” 初二数形结合思想
                初二数学 利用“数形结合思想” 初二数形结合思想
                初二数学 利用“数形结合思想” 初二数形结合思想

            </div>

            <div class="course-time-price">
                <div class="course-time">
                    2018-10-07
                </div>
                <div class="course-price">
                    ¥25元
                </div>
            </div>
        </div>
    </div>
    <div class="my-course">
        <div class="my-course-left">
            <input type="checkbox" class="course-check">
        </div>
        <div class="my-course-right">
            <div class="my-course-title line-limit-length">
                初二数

            </div>

            <div class="course-time-price">
                <div class="course-time">
                    2018-10-07
                </div>
                <div class="course-price">
                    ¥25元
                </div>
            </div>
        </div>
    </div>

 $(".course-check").click(function (event) {
        let courseBox = $(this);
        let checkStatus = courseBox.prop("checked");

        event.stopPropagation()
    });

    $(".my-course").click(function () {
        let myCourse = $(this);
        let courseBox = myCourse.find(".course-check");

        if(courseBox.prop("checked")){
            courseBox.prop("checked",false);
        }else {
            courseBox.prop("checked",true);
        }
    });

通过append来实现1

  $.each(course_list,function (k, v) {
            console.info(k,v);

            let title = v.title;
            let price = v.price;
            let time = v.time;

            var percourse_html = '<div class="my-course">\n' +
                '        <div class="my-course-left">\n' +
                '            <input type="checkbox" class="course-check">\n' +
                '        </div>\n' +
                '        <div class="my-course-right">\n' +
                '            <div class="my-course-title line-limit-length">\n' +
                '                '+title+'\n'+
                '            </div>\n' +
                '\n' +
                '            <div class="course-time-price">\n' +
                '                <div class="course-time">\n' +
                '                    '+time+'\n' +
                '                </div>\n' +
                '                <div class="course-price">\n' +
                '                    '+price+'\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </div>';
            course_list_html+= percourse_html

        });

        $(".course-outer").append(course_list_html)

实现方式如下：

$(".course-outer").on("click",".course-check",function () {
        console.info("   my-course----");

        let courseBox = $(this);
        let checkStatus = courseBox.prop("checked");

        if(checkStatus){
            courseBox.prop("checked",false);
        }else {
            courseBox.prop("checked",true);
        }
    });

    $(".course-outer").on("click",".my-course",function () {
        let myCourse = $(this);
        let courseBox = myCourse.find(".course-check");

        if(courseBox.prop("checked")){
            courseBox.prop("checked",false);
        }else {
            courseBox.prop("checked",true);
        }
    });

通过label来实现

第2种情况有个bug 就是点击checkbox 不能组织冒泡
我们可以通过外面包裹一个label来实现

 function createCourseList(data) {
        var course_list = data.resp;
        var course_list_html = "";
        $.each(course_list, function (k, v) {

            let title = v.title;
            let price = v.price;
            let time = v.time;
            let id = v.id
            var percourse_htm = '<label for="course-check' + id + '" class="my-course">\n' +
                '            <div class="my-course-left">\n' +
                '                <input type="checkbox" id="course-check' + id + '" courseid="' + id +
                '" price="' + price + '" onclick="ckCourse(this)" class="course-checkbox-class">\n' +
                '            </div>\n' +
                '            <div class="my-course-right">\n' +
                '                <div class="my-course-title line-limit-length">\n' +
                '                    ' + title + '\n' +
                '                </div>\n' +
                '                <div class="course-time-price">\n' +
                '                    <div class="course-time">\n' + '时间:' +
                '                        ' + timestampToTime(parseInt(time)) + '\n' +
                '                    </div>\n' +
                '                    <div class="course-price">\n' + '价格:' +
                '                        ' + price + '\n' + '元' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </label>\n';
            $(".course-outer").append(percourse_htm)
        });
    };

  function ckCourse(obj) {
        var ckObj = $(obj);
        var status = ckObj.prop("checked");

        var price = parseInt(ckObj.attr("price"));//int
        var courseid = ckObj.attr("courseid");//str

        var index = isInArray(ordersIds, courseid);
        if (status) {
            totalPrice += price;
            if (index === -1) {
                ordersIds.push(courseid)
            }
        } else {
            totalPrice -= price;
            if (index !== -1) {
                ordersIds.splice(index, 1);
            }
        }
        $(".course-total-price").text(totalPrice);

        console.info(ordersIds)
    }

    function isInArray(arr, value) {
        for (var i = 0; i < arr.length; i++) {
            if (value === arr[i]) {
                return i;
            }
        }
        return -1;
    }

这样即可