解决checkbox点击选中问题

Posted 2023-02-21 易辰_

文章目录

• • • 通过手动布局
    • 通过append来实现1
    • 通过label来实现

今天来了解下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来实现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;
    

这样即可