這篇文章為大家?guī)?lái)了關(guān)於uniapp的相關(guān)知識(shí)，其中主要整理了實(shí)現(xiàn)多選框的全選功能的相關(guān)問(wèn)題，無(wú)法實(shí)現(xiàn)全選的原因是動(dòng)態(tài)修改checkbox的checked欄位時(shí)，介面上的狀態(tài)能夠即時(shí)變化，但是無(wú)法觸發(fā)checkbox-group的change事件，下面一起來(lái)看一下，希望對(duì)大家有幫助。

推薦：《uniapp教學(xué)》

uniapp內(nèi)建的checkbox其實(shí)以及checkbox- group本來(lái)就挺好的，但有兩個(gè)問(wèn)題：

1. 無(wú)法依賴其事件實(shí)作全選
2. 樣式固定，難以修改

#他們無(wú)法實(shí)現(xiàn)全選的原因是：
我動(dòng)態(tài)修改checkbox的checked字段時(shí)，介面上的狀態(tài)能夠即時(shí)變化，但是無(wú)法觸發(fā)checkbox- group的change事件。意味著無(wú)法依賴checkbox-group管理好已選項(xiàng)。

就是說(shuō)：我點(diǎn)了全選，介面上看著是全選了。然後此時(shí)我取消了其中一個(gè)選項(xiàng)，此時(shí)觸發(fā)change事件，但它回饋給我的已選清單是錯(cuò)的。這是不行的。

所以我自己想了個(gè)實(shí)現(xiàn)全選多選框的方案。

實(shí)現(xiàn)想法

鑑於上面的問(wèn)題，於是就可以放棄checkbox-group了，那麼，我順便就放棄了checkbox，因?yàn)槲冶容^喜歡radio的圓圈樣式。

首先先模擬生成一些數(shù)據(jù)，方便展示，數(shù)據(jù)的要點(diǎn)是要有一個(gè)字段selected，其餘隨心所欲：

<script>
    import { reactive } from "vue";
    // 模擬的數(shù)據(jù)對(duì)象，要是響應(yīng)式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成數(shù)據(jù)
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "標(biāo)題" + i,
            selected: false,
        });
    }</script>

然後我們需要有一個(gè)存儲(chǔ)已選擇資料資訊的對(duì)象，採(cǎi)用map：

????//?存儲(chǔ)已選內(nèi)容，?因?yàn)檫@個(gè)列表是增刪很頻繁的，所以選用map而不是數(shù)組，key對(duì)應(yīng)的是數(shù)據(jù)的下標(biāo)。至于value存放什么，完全由自己定
????let?selected?=?reactive(new?Map<number>());</number>

在然後我們得有一個(gè)選項(xiàng)框點(diǎn)擊事件，用於選擇資料或取消選擇：

????//?選項(xiàng)框點(diǎn)擊事件，參數(shù)是數(shù)據(jù)的下標(biāo)
????function?checkbox(index:?number)?{
????????//?選中的狀態(tài)下再次點(diǎn)擊，即為取消選中
????????if?(data[index].selected)?{
????????????data[index].selected?=?false;
????????????selected.delete(index);?//?然后刪除對(duì)應(yīng)key即可
????????}
????????//?未選中狀態(tài)下點(diǎn)擊
????????else?{
????????????data[index].selected?=?true;
????????????selected.set(index,?data[index].id);
????????}
????}

再再然後，我們還得有一個(gè)全選的點(diǎn)擊事件：

????//?全選與反選事件
????function?allSelect()?{
????????//?已經(jīng)全選情況下，就是反選，全選就說(shuō)明長(zhǎng)度一樣
????????if?(selected.size?===?data.length)?{
????????????selected.clear();?//?全部清除
????????????data.forEach((element)?=>?{
????????????????element.selected?=?false;?//?全部不選，就行了
????????????});
????????}
????????//?還未全選的狀態(tài)下
????????else?{
????????????data.forEach((element,?index)?=>?{
????????????????//?因?yàn)榭赡艽嬖诓糠忠呀?jīng)選擇了，所以得先判斷是否已存在，不存在才需要添加
????????????????if?(!selected.has(index))?{
????????????????????selected.set(index,?element.id);?//?key是對(duì)應(yīng)的下標(biāo)index，而value是可以自定義的
????????????????????element.selected?=?true;?//?設(shè)為選中
????????????????}
????????????});
????????}
????}

其實(shí)上面兩個(gè)點(diǎn)擊事件都是很基本的判斷和增刪資料。至此功能已經(jīng)全部都有了，下面看看頁(yè)面怎麼寫(xiě)：

<template>
????<!-- 是個(gè)多選列表 -->
????<view>
????????<label>
????????????<radio></radio>{{?item.text?}}????????</label>
????</view>
????<!-- 全選按鈕 -->
????<label>?<radio></radio>全選</label></template>

其實(shí)有兩組radio，一個(gè)是循環(huán)展示數(shù)據(jù)，一個(gè)是全選按鈕。

連起來(lái)的完整程式碼：

<template>
????<!-- 是個(gè)多選列表 -->
????<view>
????????<label>
????????????<radio></radio>{{?item.text?}}
????????</label>
????</view>
????<!-- 全選按鈕 -->
????<label>?<radio></radio>全選</label></template><script>
    import { reactive } from "vue";

    // 模擬的數(shù)據(jù)對(duì)象，要是響應(yīng)式的
    let data = reactive([] as { id: number; text: string; selected: boolean }[]);
    // 生成數(shù)據(jù)
    for (let i = 0; i < 10; i++) {
        data.push({
            id: i + 5,
            text: "標(biāo)題" + i,
            selected: false,
        });
    }

    // 存儲(chǔ)已選內(nèi)容， 因?yàn)檫@個(gè)列表是增刪很頻繁的，所以選用map而不是數(shù)組，key對(duì)應(yīng)的是數(shù)據(jù)的下標(biāo)。至于value存放什么，完全由自己定
    let selected = reactive(new Map<number, number>());

    // 全選與反選事件
    function allSelect() {
        // 已經(jīng)全選情況下，就是反選，全選就說(shuō)明長(zhǎng)度一樣
        if (selected.size === data.length) {
            selected.clear(); // 全部清除
            data.forEach((element) => {
                element.selected = false; // 全部不選，就行了
            });
        }
        // 還未全選的狀態(tài)下
        else {
            data.forEach((element, index) => {
                // 因?yàn)榭赡艽嬖诓糠忠呀?jīng)選擇了，所以得先判斷是否已存在，不存在才需要添加
                if (!selected.has(index)) {
                    selected.set(index, element.id); // key是對(duì)應(yīng)的下標(biāo)index，而value是可以自定義的
                    element.selected = true; // 設(shè)為選中
                }
            });
        }
    }

    // 選項(xiàng)框點(diǎn)擊事件，參數(shù)是數(shù)據(jù)的下標(biāo)
    function checkbox(index: number) {
        // 選中的狀態(tài)下再次點(diǎn)擊，即為取消選中
        if (data[index].selected) {
            data[index].selected = false;
            selected.delete(index); // 然后刪除對(duì)應(yīng)key即可
        }
        // 未選中狀態(tài)下點(diǎn)擊
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }</script><style></style>

看起來(lái)程式碼不少，其實(shí)都是很基礎(chǔ)的邏輯判斷。

最後效果是這樣的：
全選：

#多選：

反選全部：

推薦：《uniapp教學(xué)》

以上是實(shí)例講解uniapp實(shí)現(xiàn)多選框的全選功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！