[jQuery] 實現Checkbox 的全選取/全消除－吉米.NET

善用 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