<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>全選全不選</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script>
function selectAll(){
// 獲取id爲all的複選框checked屬性
var status = document.getElementById("all").checked;
// 獲取所有class屬性爲single的複選框
var boxs = document.getElementsByClassName("single");
// 將數組中複選框的狀態和id爲all的複選框一致
for(var i=0;i<boxs.length;i++){
boxs[i].checked=status;
}
// 將已選中裏面的數量改變
getCount();
}
function getCount(){
// 定義一個變量用於記錄數量
var count = 0;
// 遍歷數組
var boxs = document.getElementsByClassName("single");
// 計算出數組中複選框的狀態爲true的數量
for(var i=0;i<boxs.length;i++){
if(boxs[i].checked)
count++;
}
// 如果複選框沒有被全部選中（哪怕只有一個未被選中），將全選狀態改變
if(count == boxs.length){
document.getElementById("all").checked = true;
}else{
document.getElementById("all").checked = false;
}
// 改變已選中的數量
// document.getElementById("f1").innerHTML(count);
$("#f1").html(count);
}
</script>
</head>
<body>
<table width="200" border="1" align="center" >
<tr>
<td >全選<input id="all" type="checkbox" onClick="selectAll()"/></td>
<td>【已選中<font color='#FF0000' id="f1">0</font>】</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞1</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞2</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞3</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞4</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞5</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞6</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞7</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞8</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞9</td>
</tr>
<tr>
<td><input class="single" type="checkbox" onClick="getCount()"/></td>
<td>新聞10</td>
</tr>
</table>
</body>
</html>功能介紹：當點擊全選按鈕，所有新聞爲選中狀態，當取消全選，所有新聞爲未選中狀態。當有一條新聞未被選中，全選按鈕爲未選中。