JavaScript實(shí)現(xiàn)全選與反選功能

更新時(shí)間：2024年04月03日 09:35:33 作者：北城笑笑

這篇文章主要為大家詳細(xì)介紹了如何分別使用Vue和JavaScript實(shí)現(xiàn)全選與反選功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

簡(jiǎn)介

在JavaScript中，實(shí)現(xiàn)全選和反選通常是通過(guò)操作DOM元素和事件監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)；

全選功能：當(dāng)用戶點(diǎn)擊一個(gè)“全選”復(fù)選框時(shí)，頁(yè)面中所有具有相同類名的復(fù)選框都將被選中；

反選功能：用戶點(diǎn)擊一個(gè)“反選”復(fù)選框時(shí)，已選中的將變?yōu)槲催x中，未選中的將變?yōu)檫x中。

這里分別用原生JS和Vuejs實(shí)現(xiàn)一下

一、JavaScript實(shí)現(xiàn)

1、先看效果

2、html部分

<div class="test_checks">
      <h2>JavaScript原生全選、反選功能</h2>
      <input type="checkbox" id="selectAll" /> Select All
      <br />
      <br />
      <input type="checkbox" class="checkbox" /> Item 1
      <br />
      <input type="checkbox" class="checkbox" /> Item 2
      <br />
      <input type="checkbox" class="checkbox" /> Item 3
      <br />
</div>

3、這里首先為selectAll復(fù)選框添加了一個(gè)change事件監(jiān)聽(tīng)器，當(dāng)用戶點(diǎn)擊該復(fù)選框時(shí)，將觸發(fā)該事件；然后在事件處理函數(shù)中，通過(guò)遍歷所有復(fù)選框，將它們的選中狀態(tài)設(shè)置為與selectAll復(fù)選框相同的狀態(tài)

document.getElementById("selectAll").addEventListener("change", function () {
    var checkboxes = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkboxes.length; i++) {
       checkboxes[i].checked = this.checked;
   }
});

4、這里在事件處理函數(shù)中，為每個(gè)復(fù)選框添加了一個(gè)change事件監(jiān)聽(tīng)器。當(dāng)用戶點(diǎn)擊某個(gè)復(fù)選框時(shí)，觸發(fā)該事件。在事件處理函數(shù)中，首先設(shè)置allChecked變量為true，然后遍歷所有復(fù)選框，如果發(fā)現(xiàn)有復(fù)選框沒(méi)有被選中，將allChecked變量設(shè)置為false并跳出循環(huán)。最后，將selectAll復(fù)選框的選中狀態(tài)設(shè)置為allChecked

    var checkboxes = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].addEventListener("change", function () {
        var allChecked = true;
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            allChecked = false;
            break;
          }
        }
        document.getElementById("selectAll").checked = allChecked;
      });
    }

5、完整代碼

  <div class="test_checks">
      <h2>JavaScript原生全選、反選功能</h2>
      <input type="checkbox" id="selectAll" /> Select All
      <br />
      <br />
      <input type="checkbox" class="checkbox" /> Item 1
      <br />
      <input type="checkbox" class="checkbox" /> Item 2
      <br />
      <input type="checkbox" class="checkbox" /> Item 3
      <br />
  </div>
 
 
  <script>
    document
      .getElementById("selectAll")
      .addEventListener("change", function () {
        var checkboxes = document.getElementsByClassName("checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
          checkboxes[i].checked = this.checked;
        }
      });
 
    var checkboxes = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].addEventListener("change", function () {
        var allChecked = true;
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            allChecked = false;
            break;
          }
        }
        document.getElementById("selectAll").checked = allChecked;
      });
    }
  </script>

二、Vue.Js實(shí)現(xiàn)

1、先看效果

2、html部分

<div>
  <!-- 全選按鈕 -->
  <input
    type="checkbox"
    v-model="checkAllFlag"
    @change="choseCheckAll"
  />
  <!-- 可選項(xiàng)目列表 -->
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <input
        type="checkbox"
        v-model="checkedS"
        :value="item.id"
        @change="ChoseChecks"
      />
      {{ item.name }}
    </li>
  </ul>
</div>

這里為全選按鈕綁定一個(gè)v-model的checkAllFlag狀態(tài)，用于存儲(chǔ)全選狀態(tài)；然后為每個(gè)可選項(xiàng)目綁定一個(gè)v-model的 checkedS屬性，它是一個(gè)數(shù)組，用于存儲(chǔ)被選中的項(xiàng)目的ID。

3、然后定義相關(guān)的數(shù)據(jù)類型

data() {
    return {
      checkAllFlag: false,
      checkedS: [],
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
        { id: 4, name: "Item 4" },
      ],
    };
},

4、函數(shù)部分

  methods: {
    choseCheckAll() {
      this.checkedS = this.checkAllFlag
        ? this.items.map((item) => item.id)
        : [];
    },
    ChoseChecks(value) {
      if (this.checkAllFlag && value) {
        this.checkAllFlag = false;
      } else if (
        !this.checkAllFlag &&
        this.checkedS.length === this.items.length &&
        value
      ) {
        this.checkAllFlag = true;
      }
    },
  },

這里為全選按鈕的@change事件choseCheckAll，該方法根據(jù)全選狀態(tài)更新所有項(xiàng)目的選中狀態(tài)。
每個(gè)可選項(xiàng)目的@change事件觸發(fā)一個(gè)方法（如 ChoseChecks），用于更新全選狀態(tài)，當(dāng)所有項(xiàng)目都被選中或取消選中時(shí)，全選按鈕的狀態(tài)應(yīng)相應(yīng)改變。

5、注意事項(xiàng)

choseCheckAll 方法：

當(dāng)全選按鈕被選中時(shí)，將所有項(xiàng)目的ID（this.items.map(item => item.id)）賦值給 checkedS，實(shí)現(xiàn)全選。
當(dāng)全選按鈕被取消選中時(shí)，將 checkedS 設(shè)置為空數(shù)組，取消所有項(xiàng)目的選中狀態(tài)。

ChoseChecks 方法：

當(dāng)全選按鈕已選中且某個(gè)項(xiàng)目被取消選中時(shí)，將 checkAllFlag 設(shè)置為 false，表示不再全選。
當(dāng)全選按鈕未選中，且當(dāng)前選中的項(xiàng)目數(shù)量等于總項(xiàng)目數(shù)減一，且有新的項(xiàng)目被選中時(shí)，將 checkAllFlag 設(shè)置為 true，表示所有項(xiàng)目已被選中。這里的條件判斷是為了避免在勾選最后一個(gè)未選中項(xiàng)時(shí)觸發(fā)兩次ChoseChecks，導(dǎo)致checkAllFlag被錯(cuò)誤地重置。

6、完整代碼

  <div class="test_checks">
 
    <input
      type="checkbox"
      v-model="checkAllFlag"
      @change="choseCheckAll"
    /><span class="checkll_dom">全選</span>
 
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input
          type="checkbox"
          v-model="checkedS"
          :value="item.id"
          @change="ChoseChecks"
        />
        {{ item.name }}
      </li>
    </ul>
  </div>
 
  data() {
    return {
      checkAllFlag: false,
      checkedS: [],
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
        { id: 4, name: "Item 4" },
      ],
    };
  },
 
  methods: {
    choseCheckAll() {
      this.checkedS = this.checkAllFlag
        ? this.items.map((item) => item.id)
        : [];
    },
    ChoseChecks(value) {
      if (this.checkAllFlag && value) {
        this.checkAllFlag = false;
      } else if (
        !this.checkAllFlag &&
        this.checkedS.length === this.items.length &&
        value
      ) {
        this.checkAllFlag = true;
      }
    },
  }

以上就是JavaScript實(shí)現(xiàn)全選與反選功能的詳細(xì)內(nèi)容，更多關(guān)于JavaScript全選反選的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: