<? ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table> <tr> <th><input type="checkbox" id="j_cbAll"></th> <th>第一行</th> <th>第二行</th> </tr> <tbody id="j_tb"> <tr> <td><input type="checkbox"></td> <td>hang1</td> <td>hang11</td> </tr> <tr> <td><input type="checkbox"></td> <td>hang2</td> <td>hang22</td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> $(function () { var $j_cbAll = $('#j_cbAll'), j_cbAll = $j_cbAll[0], $tb = $('#j_tb'), $cbs = $tb.find(':checkbox'), cbslen = $cbs.length; $j_cbAll.click(function () { var i = 0; if (this.checked === true) { for (; i < cbslen; i++) { $cbs[i].checked = true; } } else { for (; i < cbslen; i++) { $cbs[i].checked = false; } } }); $cbs.click(function () { var $selcblen = $tb.find(":checkbox:checked"); $selcblen.length === cbslen ? j_cbAll.checked = true : j_cbAll.checked = false; }) }) </script> </body> </html>
一個checkbox框實現"全選+反選"功能
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.