JS實現表單全選以及取消全選實例
本文實例為大傢分享瞭JS實現表單全選以及取消全選的具體代碼，供大傢參考，具體內容如下
實現效果：
全選按鈕：點擊全選按鈕所有的小按鈕都會被選中；點掉全選按鈕，所有按鈕取消選中；
小按鈕：隻有全部被選中，全選按鈕才會被選中
思路分析：
1、全選和取消全選做法：讓下面所有復選框的 checked屬性（選中狀態）跟隨全選按鈕即可
使用 this.checked 可以獲得當前復選框的狀態，如果是true就代表被選中，如果是false就代表沒被選中。
註：<input>的 checked 屬性是一個佈爾屬性，checked 屬性規定在頁面加載時應該被預先選定的<input> 元素。
inp[i].checked = this.checked; 使下面所有的復選框的checked屬性值等同於 全選按鈕的checked值，跟隨全選按鈕的狀態。
this.checked 得到的是 true或是 false，如果是true，就把true賦值給所有下面的復選框的 checked屬性。
想實現全選和取消全選，最核心的思路就在於：把全選按鈕當前是否選中的狀態，將這個狀態賦給下面所有復選框
2、下面的復選框需要全部選中，上面全選按鈕才是選中狀態的做法：（下面復選框的小按鈕有一個沒被選中，那麼全選按鈕也是沒被選中的狀態）給下面的復選框綁定點擊事件，每次點擊都要循環查看下面復選框是否還有沒被選中的，如果有一個沒被選中的，上面全選就不選中。
3、可以設置一個變量來控制全選按鈕是選中還是沒選中。var flag=true；
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單全選+取消全選</title>
<style>
*{
margin:0;padding: 0;
}
table{
width:500px;
position:relative;
margin:100px auto;
border-collapse:collapse;
border:1px solid #d7d7d7;
}
thead tr{
background-color:#222;
font-weight: 600;
color:#e9e9e9;
}
tbody tr:hover{
background: #F5F5F5;
}
table tr{
text-align: center;
height:30px;
}
</style>
</head>
<body>
<table border=1>
<thead>
<tr>
<td><input type="checkbox" id='cekall'></td>
<td>商品</td>
<td>價錢</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPhone 11</td>
<td>5999.0</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>榮耀20</td>
<td>2299.0</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPhone XR</td>
<td>4499.0</td>
</tr>
</tbody>
</table>
</body>
<script>
// 1、全選和取消全選做法：讓下面所有復選框的 checked屬性（選中狀態）跟隨全選按鈕即可
// 獲取元素，獲取全選按鈕和下面小的復選框
var cekall = document.getElementById('cekall');
var inp = document.querySelector('tbody').getElementsByTagName('input');
// 註冊事件
cekall.onclick = function(){
// this.checked 可以得到當前復選框的選中狀態，如果是 true 就是選中，如果是 false 就是未選中
console.log(this.checked);
for(var i=0; i< inp.length; i++){
inp[i].checked = this.checked;
}
}
// 2、下面的復選框要全部選中，上面的全選按鈕才能夠全部選中，給下面的所有復選框綁定事件，每次點擊，都要循環查看下面下面所有的復選框是否有沒選中的，如果有沒選中的復選框，那麼上面的全選按鈕就不選中。
for(var i = 0; i<inp.length; i++){
inp[i].onclick = function(){
// 設置一個變量來控制按鈕是否全部選中
var flag = true;
// 每次點擊下面的復選框都要檢查下面的四個小按鈕是否被全部選中。
for(var i =0; i<inp.length; i++){
if(!inp[i].checked){
flag = false;
}
}
cekall.checked = flag;
}
}
</script>
</body>
</html>
實現效果：
點擊全選按鈕
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。