//js實現全選反選源代碼，超級簡單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>反選全選</title>
<style type="text/css">
table{
border:#0FF 1px solid;
border-collapse:collapse;
}
table th{
text-align:center;
}
table td{
border:1px solid #999;
text-align:center;
}
.one{
background:#9FC;
}
.two{
background:#FC6;
}
</style>
<script type="text/javascript" language="javascript">
function gehang(){
//獲取tr節點
var tr=document.getElementsByTagName("tr");
//為第一行添加背景顏色
tr[0].style.background="#00FF66";
//為最後一行添加背景顏色
tr[tr.length-1].style.background="#00FF66";
}
//創建全選反選函數
function xuan(type){
//獲取name值
var qcheck=document.getElementsByName("check[]");
//獲取選的按鈕
if(type=="qx"){
for(var i=0;i<=qcheck.length;i++){
qcheck[i].checked=true;
}
}
if(type=="fx"){
for(var i=0;i<=qcheck.length;i++){
qcheck[i].checked=false;
}
}
if(type=="qxx"){
for(var i=0;i<=qcheck.length;i++){
if(qcheck[i].checked){
qcheck[i].checked=false;
}
else{
qcheck[i].checked=true;
}
}
}
}
function del(){
var input=document.getElementsByName("check[]");
for(var i=input.length-1; i>=0;i–){
if(input[i].checked==true){
//獲取td節點
var td=input[i].parentNode;
//獲取tr節點
var tr=td.parentNode;
//獲取table
var table=tr.parentNode;
//移除子節點
table.removeChild(tr);
}
}
}
</script>
</head>
<body onload="gehang()">
<table width="400" border="0" align="center">
<tr>
<th><input type="checkbox">全選</th>
<th>發件人</th>
<th>郵件名稱</th>
<th>郵件附屬信息</th>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>張三11</td>
<td>我是郵件11</td>
<td>我是附屬信息11</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>張三12</td>
<td>我是郵件12</td>
<td>我是附屬信息12</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]" /></td>
<td>張三13</td>
<td>我是郵件13</td>
<td>我是附屬信息13</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>張三14</td>
<td>我是郵件14</td>
<td>我是附屬信息14</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>張三15</td>
<td>我是郵件15</td>
<td>我是附屬信息15</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>張三16</td>
<td>我是郵件16</td>
<td>我是附屬信息16</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>張三17</td>
<td>我是郵件17</td>
<td>我是附屬信息17</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>張三18</td>
<td>我是郵件18</td>
<td>我是附屬信息18</td>
</tr>
<tr>
<td><input type="checkbox" name="check[]"></td>
<td>張三19</td>
<td>我是郵件19</td>
<td>我是附屬信息19</td>
</tr>
<tr>
<th><input type="checkbox">全選</th>
<td colspan="3" align="center">
<input type="button" id="qx" onclick="xuan('qx')" value="全選">
<input type="button" id="qxx" onclick="xuan('qxx')" value="取消全選">
<input type="button" id="fx" onclick="xuan('fx')" value="反選">
<input type="button" id="del" onclick="del()" value="刪除所選附件">
</td>
</tr>
</table>
</body>
</html>
摘自 席偉娜的專欄