相信不少人經常遇到全選中或者全不選中的情形，依舊是淘寶上的購物車，而這個也可以使用腳本來完成相應的功能。所以本篇博文就是主要來介紹一下相關的知識點。
一、案例需求
我們希望在后臺系統實現一個批量刪除的操作(全選所有的復選框)，顯示效果如下：
二、步驟分析
第一步，首先我們要先實現這個頁面；
第二步，選中全選的那個復選框，通過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>實現效果如下所示：
四、JavaScript的DOM的操作
介紹完上面的案例之后，接下來要介紹的就是JavaScript的DOM操作了…
4.1什么是DOM？
DOM：Document Object Model，文檔對象模型，定義訪問和操作結構化文檔（HTML）的方式。
創建結構化的文檔：HTML、XML等
DOM通常包括核心DOM，HTML DOM，XML DOM，通常HTML DOM和XML DOM是可以相互使用的
HTML DOM將整個HTML文檔呈現成一棵DOM樹，書中有元素，屬性，文本等成員，大概結構如下所示：
4.2Document對象
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。
以下兩個方法很重要，但是在手冊中查不到！
創建文本節點：document.createTextNode()
創建元素節點：document.createElement()
4.3Element對象
什么是element對象？我們所認知的html頁面中所有的標簽都是element元素
下面介紹一些關于element的一些相關的方法：
4.4Attribute對象
什么是Attribute對象?我們所認知的HTML中的所有標簽的屬性都是Attribute對象。
推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都歡迎，不定期分享干貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小伙伴。
相關推薦
飛利浦276e顯示器評測（飛利浦276e8VJSB怎么樣）
一、前言 4K液晶顯示器發展至今已經過去了好幾個年頭了，隨著制造工藝的成熟和成本的降低，4K顯示器的售價也是變得越來越親民，市場上涌現了許多入門級的4K顯示器，不過，雖說是入門，但…
js壓縮工具哪些好（推薦這15款壓縮工具）
JavaScript 代碼壓縮是指去除源代碼里的所有不必要的字符，而不改變其功能的過程。這些不必要的字符通常包括空格字符，換行字符，注釋以及塊分隔符等用來增加可讀性的代碼，但并不需…
js壓縮工具哪個好（實測好用且簡單的9款工具）
削減是一個從源代碼中刪除不必要的字符的技術使它看起來簡單而整潔。這種技術也被稱為代碼壓縮和最小化。在這里，我們為你收集了9個最好的JavaScript壓縮工具將幫助您刪除不必要的空…
js日期加一天的公式（js獲取下一天的日期的方法）
想自己寫一個日期的加減方法，但是涉及到每個月天數的判斷，如果是2月份的話，還要涉及到閏年的判斷，有些復雜，應用過程中總是出現問題，于是查了下資料，以在某個日期上加減天數來說，其實只…
jsp和servlet區別在哪（簡述2者間的不同處）
JSP全名為Java Server Pages，中文名叫java服務器頁面，其根本是一個簡化的Servlet設計，它是由SunMicrosystems公司倡導、許多公司參與一起建立…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。