jquery全選,全不選,反選
阿新 • • 發佈:2018-12-31
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Smarty分頁程式</title> <style type='text/css'> .news{width:800px;border:1px #369 solid; border-collapse:collapse;} .news tr th,.news tr td {border:1px #369 solid; text-align:center;line-height:30px; font-size:12px;} </style> <script type='text/javascript' src='jquery.js'></script> <script> $(function(){ /***********全選,全不選,反選************/ $('#abc').click(function(){ if($(this).prop('checked')){ $('table input[type=checkbox]').prop('checked',true); }else{ $('table input[type=checkbox]').prop('checked',false); } }); $('#bcd').click(function(){ $('table input[type=checkbox]').each(function(){ if ($(this).prop("checked")) { $(this).prop("checked", false); }else { $(this).prop("checked", "checked"); } }); }); /***********全選,全不選,反選************/ }) </script> </head> <body> <h1>Smarty分頁程式</h1> 全選:<input id='abc' type="checkbox"> 反選:<input id='bcd' type="checkbox"> <input type="button" value="刪除"> <table class='news'> <tr> <th>操作: </th> <th>編號</th> <th>姓名</th> <th>內容</th> <th>釋出時間</th> </tr> {{foreach from = $data item=v key=k}} <tr> <td><input type="checkbox"></td> <td>{{$v['id']}}</td> <td>{{$v['username']}}</td> <td>{{$v['content']}}</td> <td>{{$v['addtime']}}</td> </tr> {{/foreach}} <tr> <td colspan="5"> <input type='button' id='btnFirst' value='首頁'> <input type='button' id='btnPrev' value='上一頁'> <a href='fenye.php?page={$pageNext}'>下一頁</a> <a href='fenye.php?page={$pageCount}'>末頁</a> </td> </tr> </table> </body> </html>