JS實(shí)現(xiàn)表單全選以及取消全選實(shí)例

更新時(shí)間：2022年03月07日 11:34:32 作者：Cloud%

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)表單全選以及取消全選實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)表單全選以及取消全選的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)效果：

全選按鈕：點(diǎn)擊全選按鈕所有的小按鈕都會(huì)被選中；點(diǎn)掉全選按鈕，所有按鈕取消選中；

小按鈕：只有全部被選中，全選按鈕才會(huì)被選中

思路分析：

1、全選和取消全選做法：讓下面所有復(fù)選框的 checked屬性（選中狀態(tài)）跟隨全選按鈕即可

使用 this.checked 可以獲得當(dāng)前復(fù)選框的狀態(tài)，如果是true就代表被選中，如果是false就代表沒被選中。

注：<input>的 checked 屬性是一個(gè)布爾屬性，checked 屬性規(guī)定在頁面加載時(shí)應(yīng)該被預(yù)先選定的<input> 元素。

inp[i].checked = this.checked; 使下面所有的復(fù)選框的checked屬性值等同于全選按鈕的checked值，跟隨全選按鈕的狀態(tài)。

this.checked 得到的是 true或是 false，如果是true，就把true賦值給所有下面的復(fù)選框的 checked屬性。

想實(shí)現(xiàn)全選和取消全選，最核心的思路就在于：把全選按鈕當(dāng)前是否選中的狀態(tài)，將這個(gè)狀態(tài)賦給下面所有復(fù)選框

2、下面的復(fù)選框需要全部選中，上面全選按鈕才是選中狀態(tài)的做法：（下面復(fù)選框的小按鈕有一個(gè)沒被選中，那么全選按鈕也是沒被選中的狀態(tài)）給下面的復(fù)選框綁定點(diǎn)擊事件，每次點(diǎn)擊都要循環(huán)查看下面復(fù)選框是否還有沒被選中的，如果有一個(gè)沒被選中的，上面全選就不選中。

3、可以設(shè)置一個(gè)變量來控制全選按鈕是選中還是沒選中。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>價(jià)錢</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、全選和取消全選做法：讓下面所有復(fù)選框的 checked屬性（選中狀態(tài)）跟隨全選按鈕即可
? ? // 獲取元素，獲取全選按鈕和下面小的復(fù)選框
? ? var cekall = document.getElementById('cekall');
? ? var inp = document.querySelector('tbody').getElementsByTagName('input');
? ? // 注冊(cè)事件
? ? cekall.onclick = function(){
? ? ? ? // this.checked ?可以得到當(dāng)前復(fù)選框的選中狀態(tài)，如果是 true 就是選中，如果是 false 就是未選中
? ? ? ? console.log(this.checked);
? ? ? ? for(var i=0; i< inp.length; i++){
? ? ? ? ? ? inp[i].checked = this.checked;
? ? ? ? }
? ? }
? ? // 2、下面的復(fù)選框要全部選中，上面的全選按鈕才能夠全部選中，給下面的所有復(fù)選框綁定事件，每次點(diǎn)擊，都要循環(huán)查看下面下面所有的復(fù)選框是否有沒選中的，如果有沒選中的復(fù)選框，那么上面的全選按鈕就不選中。
? ? for(var i = 0; i<inp.length; i++){
? ? ? ? inp[i].onclick = function(){
? ? ? ? // 設(shè)置一個(gè)變量來控制按鈕是否全部選中
? ? ? ? var flag = true;
? ? ? ? // 每次點(diǎn)擊下面的復(fù)選框都要檢查下面的四個(gè)小按鈕是否被全部選中。
? ? ? ? for(var i =0; i<inp.length; i++){
? ? ? ? ? ? if(!inp[i].checked){
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? cekall.checked = flag;
? ? ? ? }
? ? }
</script>
</body>
</html>

實(shí)現(xiàn)效果：

點(diǎn)擊全選按鈕