首頁(yè) 猿問(wèn) 大神幫忙看一下為什么實(shí)現(xiàn)不了全選還...

大神幫忙看一下為什么實(shí)現(xiàn)不了全選還有不全選的問(wèn)。

JavaScript

慕粉2222164936 2019-03-12 18:07:44

<!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>狀態(tài)</strong></td> <td><strong>發(fā)件人</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>我快回來(lái)了</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>恭喜你獲得一個(gè)親親</td> </tr> </table> <div> <a ><span>全選/不全選</span></a> ? ? ? ? <a><span>刪除郵箱</span></a> </div> </div> </body></html>

查看完整描述

3 回答

pardon110

TA貢獻(xiàn)1038條經(jīng)驗(yàn) 獲得超227個(gè)贊

你應(yīng)該認(rèn)識(shí)到以下幾個(gè)問(wèn)題

jq的返回的實(shí)例對(duì)象，通常都是集合對(duì)象
只有jq對(duì)象才能使用jq方法，原生js對(duì)象使用其方法，需要先包裝成jq對(duì)象
js中this的指向基于運(yùn)行時(shí)，由調(diào)用者決定

帶注釋代碼如下

$(function?()?{
????$("div?div?a:eq(0)").click(function?()?{
????????console.log('進(jìn)入a標(biāo)簽，此時(shí)此處的this指向原生js的a元素節(jié)點(diǎn)')
????????//$(".Select").prop("checked",?this.checked);
????????//?遍歷jQ集合對(duì)象，item為js原生checkbox對(duì)象元素
????????$(".Select").each((index,item)?=>?{
????????????//?改變?cè)鷆heckbox狀態(tài)，prop是jq方法
????????????$(item).prop("checked",?!item.checked);
????????})
????});
});

反對(duì) 回復(fù) 2019-03-24