大神帮忙看一下为什么实现不了全选还有不全选的问。
<!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>
慕粉22221649363回答
-
pardon110
你应该认识到以下几个问题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); }) }); });
随时随地看视频慕课网APP
相关分类
JavaScript