代碼如下
用JavaScript實現相關功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blue{
background-color: darkgrey;
}
</style>
<script>
//全選按鈕
function run1(){
var ch = document.getElementsByClassName("ch");
for(var i=0;i<ch.length;i++){
ch[i].checked = true;
}
}
//全不選按鈕
function run2(){
var ch = document.getElementsByClassName("ch");
for(var i=0;i<ch.length;i++){
ch[i].checked = false;
}
}
//反選按鈕
function run3(){
var ch = document.getElementsByClassName("ch");
for(var i=0;i<ch.length;i++){
if(ch[i].checked){
ch[i].checked = false;
}else{
ch[i].checked = true;
}
}
}
</script>
</head>
<body >
<table border="1px" cellpadding="0" cellspacing="0" width="80%" height="250px">
<caption><font size="5"><b>員工信息表</b></font></caption>
<tr>
<th>
<!-- onclick點擊事件 -->
<input type="button" value="全選" onclick="run1()" />
<input type="button" value="全不選" onclick="run2()" />
<input type="button" value="反選" onclick="run3()" />
</th>
<th>員工編號</th>
<th>員工姓名</th>
<th>員工年齡</th>
<th>操作</th>
</tr>
<tr>
<td ><input type="checkbox" class="ch" /></td>
<td>1</td>
<td>孫悟空</td>
<td>19</td>
<td>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<td ><input type="checkbox" class="ch"/></td>
<td>2</td>
<td>唐僧</td>
<td>60</td>
<td>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<td ><input type="checkbox" class="ch"/></td>
<td>3</td>
<td>豬八戒</td>
<td>25</td>
<td>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
<tr>
<td ><input type="checkbox" class="ch"/></td>
<td>4</td>
<td>沙僧</td>
<td>30</td>
<td>
<a href="">修改</a>
<a href="">刪除</a>
</td>
</tr>
</table>
</body>
</html>
補充使用jQuery實現
<script>
//全選
function f(){
//獲取所有複選框
$(".itemSelect").prop("checked",true);
}
//全不選
function f2(){
//獲取所有複選框
var v = $(".itemSelect");
v.prop("checked",false);
}
//反選
function f3(){
//獲取頁面中已經選中的複選框
var v1 = $(".itemSelect:checked");
//獲取頁面中沒有選中的複選框
var v2 = $(".itemSelect:not(.itemSelect:checked)");
//將選中的複選框中的狀態設置爲true
v1.prop("checked",false);
v2.prop("checked",true);
}
//反選，數組遍歷做
function f4(){
$(".itemSelect").each(function(){
//獲取當前選中複選框的狀態
var temp = $(this).prop("checked");
$(this).prop("checked",!temp);
});
}
</script>