jQuery實現全選與全不選功能
阿新 • • 發佈：2019-03-17
3.1 query event ole jquer ctype inpu function jquery實現 
初始時：
實現功能後：
實現該功能的核心代碼：
<script> $(function(){ $("#selectBtn").click(function(){ console.log($("#selectBtn"));//selectBtn對應的jQuery對象 console.log(this);//selectBtn對應的DOM對象 $("tbody input[name=‘select‘]").prop("checked",this.checked); console.log(this.checked); }); }) </script>
監測在tbody標簽下input名為select的是否被勾選：
$("tbody input[name=‘select‘]").prop("checked",this.checked);
實現該功能的總的代碼：
1實現全選與全不選功能.html<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery實現全選與全不選功能</title> 6 <script src="js/jquery-3.3.1.js"></script> 7 <script> 8 $(function(){ 9 10 $("#selectBtn").click(function(){ 11 console.log($("#selectBtn"));//selectBtn對應的jQuery對象 12 console.log(this);//selectBtn對應的DOM對象 13 14 $("tbody input[name=‘select‘]").prop("checked",this.checked);//監測在tbody標簽下input名為select的是否被勾選 15 console.log(this.checked); 16 17 }); 18 19 20 21 }) 22 </script> 23 </head> 24 <body> 25 <table border="1"> 26 <thead><tr><th><input type="checkbox" id="selectBtn"/> </th><th>付款方式 </th><th>結算方式 </th><th> 狀態</th></tr></thead><!--表頭--> 27 <tbody> 28 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 29 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 30 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 31 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 32 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 33 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 34 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 35 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 36 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 37 <tr><td><input type="checkbox" name="select"/></td><td>手機</td><td>支付寶</td><td>已付款</td></tr> 38 </tbody><!--內容--> 39 40 41 </table> 42 </body> 43 </html>
jQuery實現全選與全不選功能