大神帮忙看一下为什么实现不了全选还有不全选的问。

大神帮忙看一下为什么实现不了全选还有不全选的问。

<!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>

慕粉2222164936

浏览 598回答 3

3回答

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); }) }); });

0

0

随时随地看视频慕课网APP

相关分类

JavaScript