JQ 全选跟反选和取消
JQ 全选和反选和取消
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JQ 全选和反选和取消</title> </head> <body> <table border="1" style="margin:20px auto;"> <tr><th>选择</th><th>姓名</th></tr> <tr><td><input type="checkbox" /></td><td>吴者然</td></tr> <tr><td><input type="checkbox" /></td><td>景临境</td></tr> <tr><td><input type="checkbox" /></td><td>暴天明</td></tr> <tr><td><input type="checkbox" /></td><td>落月清</td></tr> <tr> <td colspan="2"> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverseAll()"> <input type="button" value="取消" onclick="cancleAll()"> </td> </tr> </table> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript"> function checkAll(){ $(':checkbox').prop('checked',true); } function cancleAll() { $(':checkbox').prop('checked',false); } function reverseAll(){ $(':checkbox').each(function(){ var v = $(this).prop('checked')? false:true; $(this).prop('checked',v) }) } </script> </body> </html>
效果图: