本文主要介紹了JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 效果演示

2. 彈窗代碼

<el-dialog title="分配角色" :visible.sync="dialogRoleVisible">
  <el-form label-width="80px">
    <el-form-item label="用戶名">
      <el-input disabled :value="sysUser.username"></el-input>
    </el-form-item>
    <el-form-item label="角色列表">
      <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="originalRoleList" @change="handleCheckedChange">
        <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{role.roleName}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
  <div slot="footer">
    <el-button type="primary" @click="assignRole" size="small">保存</el-button>
    <el-button @click="dialogRoleVisible = false" size="small">取消</el-button>
  </div>
</el-dialog>

這里的每個(gè)復(fù)選框綁定每個(gè)角色的 id 值

3. 變量闡述

originalRoleList 存放從后端獲取到的當(dāng)前員工對(duì)應(yīng)的角色id數(shù)組
allRoles 存放獲取到的所有角色列表，用于頁(yè)面渲染
checkAll bool值，true代表當(dāng)前選中全選，false代表沒有
allRolesId 根據(jù)所有角色獲取到的所有角色 id

4. 實(shí)現(xiàn)邏輯

為了提升用戶體驗(yàn)，allRoles、allRolesId兩個(gè)變量都是在頁(yè)面渲染之前獲得，即通過 created 函數(shù)實(shí)現(xiàn)

created() {
    this.fetchData() //刷新數(shù)據(jù)
    this.getAllRoles() 
},

通過調(diào)用后端提供的getRoles()方法來(lái)獲取到數(shù)據(jù)庫(kù)中所有的角色集合，然后通過遍歷該集合獲取到所有角色的id數(shù)組

getAllRoles(){
  api_r.getRoles().then(response => {
    this.allRoles = response.data;
    //獲取所有的id集合
    for(let i=0;i<this.allRoles.length;i++){
      this.allRolesId[i] = this.allRoles[i].id
    }
  })
},

接下來(lái)就是本篇文章的重頭戲，全選功能實(shí)現(xiàn)
由于originalRoleList是通過 v-model 雙向綁定，所以我們只需在點(diǎn)擊全選按鈕時(shí)更換當(dāng)前originalRoleList中的值就好了

handleCheckAllChange(){
    //在每一次點(diǎn)擊時(shí)通過三目運(yùn)算符判斷
  this.checkAll === false ? true : false
  if(this.checkAll)
    this.originalRoleList = this.allRolesId
  else
    this.originalRoleList = []  
},

解決完上述問題后，在調(diào)試中發(fā)現(xiàn) 在全選按鈕選中的情況下，取消其他子選項(xiàng)并沒有取消全選，所以此時(shí)我們應(yīng)該在子按鈕的 @change 事件中做相應(yīng)的邏輯完善，即簡(jiǎn)單判斷當(dāng)前角色的idList是否于全選狀態(tài)下的idList長(zhǎng)度相等即可

handleCheckAllChange(){
    //在每一次點(diǎn)擊時(shí)通過三目運(yùn)算符判斷
  this.checkAll === false ? true : false
  if(this.checkAll)
    this.originalRoleList = this.allRolesId
  else
    this.originalRoleList = []  
},

以上就是簡(jiǎn)單的頁(yè)面復(fù)選框中實(shí)現(xiàn)全選操作。而對(duì)于點(diǎn)擊保存按鈕以后與后端交互的邏輯這里就不細(xì)述，其實(shí)也就是把當(dāng)前的originalRoleList傳回去，后端通過比較新的idList和舊的idList，多的增，少的刪??

到此這篇關(guān)于JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作的文章就介紹到這了,更多相關(guān)JavaScript全選操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: