解决checkbox点击选中问题
Posted 进击的小猿
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决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来实现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;
这样即可
以上是关于解决checkbox点击选中问题的主要内容,如果未能解决你的问题,请参考以下文章
jquery 点击tr选中checkbox,解决checkbox的默认点击事件被阻止的问题
原生javascript自定义input[type=checkbox]效果