溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“javascript如何實現全選”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“javascript如何實現全選”文章能幫助大家解決問題。
javascript實現全選的方法：1、通過HTML和CSS創建一個表單；2、用DOM方法分別獲取全選和單選的“input”元素；3、設置一個變量isAllChecked；4、將isAllChecked的值賦給全選按鈕。
本文操作環境：Windows7系統、javascript1.8.5版、Dell G3電腦。
javascript 怎么實現全選？
用JS實現表單的全選與反選
這也是一個練習，就是一般電商購物車的全選，另外加了個反選（貌似有反選功能的購物車不多，倒是windows資源管理器有反選功能）
當4行商品都被勾選上時，“全選”自動被勾選上；當有商品沒有被勾選時，“全選”自動被取消。
當4行商品商品并沒有被全部勾選上時，勾選“全選”可以讓4行商品全部被勾選上；
當“全選”處于被勾選狀態時，取消“全選”的勾選，所有的商品都取消勾選。
梳理好需求，我們先用HTML和CSS把這個表單畫出來，代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>全選2</title>
<style type="text/css">
.wrap{
margin-left: 500px;
margin-top: 200px;
}
table{
border-collapse:collapse;
}
th{
border:1px solid black;
height: 45px;
}
td{
border:1px solid black;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
<table cellspacing="0" cellpadding="14">
<thead>
<tr>
<th>
<input type="checkbox" id="selectAll" onclick="funcAll()">
</th>
<th>商品</th>
<th>價格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPhone X</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPad pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPad air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>Apple watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" id="backwardOption" value="反選" onclick="funcBackward()">
</div>
</body>
</html>這里我已經把鼠標點擊事件的函數命名好了，全選叫“funcAll()”，單選叫“funcOne()”，反選叫“funcBackward()”。CSS部分主要給表單加上邊框，同時交接處邊框融合，基本就是最樸素的樣子。
先說第2條和第3條需求，邏輯相對簡單：
用DOM方法分別獲取全選和單選的“input”元素，全選只有一個，直接用getElementById()就可以了（已經提前設置好id），而單選有四個，用getElementByClassName()來獲取（已經提前設置好class），當然獲取到的是一個數組。
講獲取到的元素都賦值給變量，然后用for循環遍歷數組，將全選的這個變量的checked屬性賦值給每個單選的變量的checked屬性。
此時，已經同時解決2和3，代碼如下：
function funcAll(){
var selectAll = document.getElementById('selectAll');
var selectOnes = document.getElementsByClassName('selectOne');
for (var i = 0; i < selectOnes.length; i++) { //循環遍歷，把全選框的值賦給每個單選框
selectOnes[i].checked = selectAll.checked;
}
}接下來說第1條：“當4行商品都被勾選上時，“全選”自動被勾選上；當有商品沒有被勾選時，“全選”自動被取消。”
在這里，“全選”的狀態類似在監聽其他所有按鈕，一旦有變化，隨之變化。所以這個邏輯要寫到每行商品單選按鈕的鼠標點擊事件里。
我設置了一個變量isAllChecked作為橋梁，初始狀態將isAllChecked定義為true，循環遍歷每個單選按鈕，一旦檢測到有單選按鈕沒被勾選，就將isAllChecked置為false，跳出循環，并將isAllChecked的值賦給全選按鈕。
這樣一來，只要有一個單選按鈕沒被選中，就會將全選也變成未選中狀態。，代碼如下：
function funcOne(){
var selectAll = document.getElementById('selectAll'); //函數作用域，所以得再定義一遍
var selectOnes = document.getElementsByClassName('selectOne');
var isAllChecked = true; //定義一個變量作為橋梁來控制全選按鈕
for (var i = 0; i < selectOnes.length; i++) {
if (selectOnes[i].checked === false) {
isAllChecked = false;
break;
}
}
selectAll.checked = isAllChecked;
}
點擊反選按鈕，所有的單選按鈕狀態取反：選中的變成未選中，未選中的變成選中
點擊反選，造成的結果，仍然能夠讓全選符合之前的邏輯。
第1條其實很好實現，點擊反選按鈕時，循環遍歷4個單選按鈕，將每個元素對應的checked屬性取反即可。
但是，我們在前面實現的全選監聽所有單項，實際上是在每個單選按鈕的點擊事件里實現的，也就是說，如果我們不通過點擊單選按鈕來改變單選按鈕的狀態，全選實際上是監聽不到全局的。
所以，我們可以把監聽這部分的代碼再寫到反選的鼠標點擊函數里去，最后的代碼如下：
var selectAll = document.getElementById('selectAll'); //函數作用域，所以得再定義一遍
var selectOnes = document.getElementsByClassName('selectOne');
for (var i = 0; i < selectOnes.length; i++) {
selectOnes[i].isAllChecked = !selectOnes[i].checked;
}
function funcOne(){};
var isAllChecked = true; //定義一個變量作為橋梁來控制全選按鈕
for (var i = 0; i < selectOnes.length; i++) {
if (selectOnes[i].checked === false) {
isAllChecked = false;
break;
}
}
selectAll.checked = isAllChecked;
}最終的效果如下：
關于“javascript如何實現全選”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
