<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script > $(function(){ $("div div a:eq(0)").click(function(){ $(".Select").prop("checked",this.checked); }); }); </script> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ position: absolute; border-radius: 10px ; border: 1px solid cadetblue; width: 500px; height: 250px; left: 50px; top: 50px; background: azure; } p{ font-size: 23px; line-height: 2; } table,td{ border: 1px dashed cadetblue; line-height: 1.4; background: lavender; left: 3px; } table{ border-collapse: collapse; width: 460px; margin: 0 auto; height:160px ; } span{ display:inline-block block; width: 100px; border-radius: 20px; border: 1px solid blue; background: #5F9EA0; float: left; margin: 15px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="wrap"> <p>收件箱</p> <table> <tr> <td ><strong>状态</strong></td> <td><strong>发件人</strong></td> <td><strong>主题</strong></td> </tr> <tr> <td align="center"><input class="Select" type="checkbox" value="Select"></td> <td>Cassie</td> <td>睡醒了吗/</td> </tr> <tr> <td align="center"><input class="Select" type="checkbox" value="Select"></td> <td>Tom</td> <td>我还在呼呼大睡呢。</td> </tr> <tr> <td align="center"><input class="Select" type="checkbox" value="Select"></td> <td>Tom</td> <td>我快回来了</td> </tr> <tr> <td align="center"><input class="Select" type="checkbox" value="Select"></td> <td>Cassie</td> <td>我很想你</td> </tr> <tr> <td align="center"><input class="Select" type="checkbox" value="Select"></td> <td>Cassie公司</td> <td>恭喜你获得一个亲亲</td> </tr> </table> <div> <a ><span>全选/不全选</span></a> <a><span>删除邮箱</span></a> </div> </div> </body></html>
3 回答
pardon110
TA贡献1038条经验 获得超227个赞
你应该认识到以下几个问题
jq的返回的实例对象，通常都是集合对象
只有jq对象才能使用jq方法，原生js对象使用其方法，需要先包装成jq对象
js中this的指向基于运行时，由调用者决定
带注释代码如下
$(function () {
$("div div a:eq(0)").click(function () {
console.log('进入a标签，此时此处的this指向原生js的a元素节点')
//$(".Select").prop("checked", this.checked);
// 遍历jQ集合对象，item为js原生checkbox对象元素
$(".Select").each((index,item) => {
// 改变原生checkbox状态，prop是jq方法
$(item).prop("checked", !item.checked);
})
});
});添加回答
举报
0/150
提交
取消