<? ?> <!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框实现"全选+反选"功能
猜你喜欢
转载自blog.csdn.net/qq_40012791/article/details/80190776
今日推荐
周排行