善用 jQuery 的 Selector 可以輕鬆的實現常見的全選/全消功能。如下範例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=big5"/>
<meta name="author" content="Chui-Wen Chiu">

<script type = 『text/javascript' src=』jquery.js'></script>
<script type = 『text/javascript'>

$(document).ready( function(){ // 點選單一checkbox 檢查是否設定全選/全消 $(『#tbl input:checkbox.chk').click(function(){ if (this.checked){ if ($(『#tbl input:checked.chk').length == $(『#tbl input.chk').length){ $(『#chkAll')[0].checked = true; } }else{ $(『#chkAll')[0].checked = false; } }); }); function select_all(){ var e = $(『#chkAll')[0].checked; $(『#tbl input:checkbox.chk').each(function(){ this.checked = e; }); } </script> </head> <body> <table id=』tbl' border=』1′> <tr> <td>1</td> <td><input type=』checkbox' id=『chkAll' onclick=』select_all()』/></td> </tr> <tr> <td>2</td> <td><input type=』checkbox' class=『chk' /></td> </tr> <tr> <td>3</td> <td><input type=』checkbox' class=『chk' /></td> </tr> <tr> <td>4</td> <td><input type=』checkbox' class=『chk' /></td> </tr> </table> </body> </html>

出處:http://chuiwenchiu.wordpress.com

arrow
arrow
    文章標籤
    checkbox checked
    全站熱搜

    Jimmy 發表在 痞客邦 留言(1) 人氣()