jQuery---表格全选案例
表格全选案例
1. 给全选按钮注册点击事件:点击全选的按钮,获取所有input按钮,设置为选中,用prop设置
$("#j_cbAll").click(function () { $("#j_tb input").prop("checked", $(this).prop("checked")); });
2. 给单个按钮注册点击事件:当被选中的按钮个数等于总的按钮个数
if ($("#j_tb input:checked").length == $("#j_tb input").length)
就设置全选按钮为选中状态,true
$("#j_cbAll").prop("checked", true);
反之 false 全选不选中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; text-align: center; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>红烧肉</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>红烧狮子头</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>日式肥牛</td> <td>田老师</td> </tr> </tbody> </table> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#j_cbAll").click(function () { $("#j_tb input").prop("checked", $(this).prop("checked")); }); $("#j_tb input").click(function () { if ($("#j_tb input:checked").length == $("#j_tb input").length) { $("#j_cbAll").prop("checked", true); } else { $("#j_cbAll").prop("checked", false); } }); }); </script> </body> </html>
你好,我是Jane,如果万幸对您有用,请帮忙点下推荐,谢谢啦~另外,咱们闪存见哦~