jquery checkbox 选中了为啥没有效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery checkbox 选中了为啥没有效果相关的知识，希望对你有一定的参考价值。
参考技术A 第一种 方法：$("input:checkbox").eq(索引).attr("checked","checked");第二种 方法：$("input:checkbox")[索引].checked=true; 参考技术B
你看看代码吧
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>HTML5学堂</title>
</head>
<body>
<div class="h5course">学习HTML5，到HTML5学堂</div>
<input class="h5course-com" id="h5courseCom" type="checkbox" />
<label for="h5courseCom">HTML5学堂，一个神奇的网站</label>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.h5course-com').change(function()
if ($(this).prop('checked'))
alert('我选中啦');
;
);
</script>
</body>
</html>本回答被提问者采纳
解决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;
这样即可
以上是关于jquery checkbox 选中了为啥没有效果的主要内容，如果未能解决你的问题，请参考以下文章
为啥我用jQuery写好checkbox的全选后，点击两次后，就不行了，要刷新页面后，点击才有响应，源码是这样
jquery判断checkbox是否选中及改变checkbox状态