相信不少人經常遇到全選中或者全不選中的情形，依舊是淘寶上的購物車，而這個也可以使用腳本來完成相應的功能。所以本篇博文就是主要來介紹一下相關的知識點。

一、案例需求

我們希望在後台系統實現一個批量刪除的操作(全選所有的複選框)，顯示效果如下：

二、步驟分析

第一步，首先我們要先實現這個頁面；

第二步，選中全選的那個複選框，通過id來選中；

第三步，當這個總的選中之後，下面的也要選中，下面用name元素。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都歡迎，不定期分享乾貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小夥伴。

三、代碼實現

<html>
<head>
<title>全選與全不選</title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<script>
function chooseOrNot(){ var checkAll=document.getElementById("checkAll"); //alert(checkAll); 
if(checkAll.checked==true){ //alert("全選");
//當這個複選框被選中，那就說明下面的複選框都回被選中
var checkOnes=document.getElementsByName("checkOnes"); //alert(checkOnes);//在開發人員調試工具中可以看出這是一個集合
for(var i=0;i<checkOnes.length;i++){
 checkOnes[i].checked=true;
 }
 }else{ var checkOnes=document.getElementsByName("checkOnes"); for(var i=0;i<checkOnes.length;i++){
 checkOnes[i].checked=false;
 }
 }
 } </script>
</head>
<body>
<table border="1" align="center" width="500px">
<tr>
<td colspan="4">
<input type="button" value="添加"><input type="button" value="刪除"> 
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkAll" onclick="chooseOrNot()"></td>
<td>編號</td>
<td>姓名</td>
<td>年齡</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>1</td>
<td>張三</td>
<td>23</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>2</td>
<td>李四</td>
<td>31</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>3</td>
<td>王五</td>
<td>12</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>4</td>
<td>趙六</td>
<td>54</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>5</td>
<td>黃七</td>
<td>52</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>6</td>
<td>段九</td>
<td>12</td> 
</tr> 
</table>
</body></html>

實現效果如下所示：