解决checkbox点击选中问题

今天来了解下checkbox的点击效果，以及点击一行item同样实现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来实现

  $.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);
        }
    });