This article brings you relevant knowledge about uniapp, which mainly organizes the related issues of implementing the select-all function of the multi-select box. The reason why the select-all cannot be achieved is that the checkbox is dynamically modified. When the field is checked, the status on the interface can change in real time, but the change event of the checkbox-group cannot be triggered. Let's take a look at it. I hope it will be helpful to everyone.

Recommendation: "uniapp tutorial"

uniapp's built-in checkbox is actually as well as checkbox- group was originally very good, but there are two problems:

1. Cannot rely on its events to achieve selection all
2. The style is fixed and difficult to modify

The reason why they cannot select all is:
When I dynamically modify the checked field of checkbox, the status on the interface can change in real time, but the checkbox cannot be triggered- change event of group. This means that you cannot rely on checkbox-group to manage the selected options.

That is to say: I clicked Select All, and it looked like All was selected on the interface. Then I canceled one of the options and the change event was triggered, but the selected list it fed back to me was wrong. This won't work.

So I came up with a solution to implement the select-all multi-select box.

Implementation ideas

In view of the above problems, we can give up checkbox-group. Then, I gave up checkbox by the way, because I prefer the circle style of radio.

First simulate and generate some data for easy display. The key point of the data is to have a field selected, and the rest is as you like:

<script>
    import { reactive } from "vue";
    // 模擬的數(shù)據(jù)對象，要是響應(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>

Then we need to have a storage selected The object of data information uses map:

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

Then we have to have an option box click event for selecting data or deselecting:

????//?選項(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);?//?然后刪除對應(yīng)key即可
????????}
????????//?未選中狀態(tài)下點(diǎn)擊
????????else?{
????????????data[index].selected?=?true;
????????????selected.set(index,?data[index].id);
????????}
????}

And then, we have to have a Click event for selecting all:

????//?全選與反選事件
????function?allSelect()?{
????????//?已經(jī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是對應(yīng)的下標(biāo)index，而value是可以自定義的
????????????????????element.selected?=?true;?//?設(shè)為選中
????????????????}
????????????});
????????}
????}

In fact, the above two click events are very basic judgments and additions and deletions of data. Now all the functions are available, let’s see how the page is written:

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

In fact, there are two sets of radios, one is to display data in a loop, and the other is a select all button.

The complete code connected together:

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

    // 模擬的數(shù)據(jù)對象，要是響應(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,
        });
    }

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

    // 全選與反選事件
    function allSelect() {
        // 已經(jī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是對應(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); // 然后刪除對應(yīng)key即可
        }
        // 未選中狀態(tài)下點(diǎn)擊
        else {
            data[index].selected = true;
            selected.set(index, data[index].id);
        }
    }</script><style></style>

It seems like a lot of code, but in fact it is all very basic logical judgments.

The final effect is like this:
Select all:

Multiple selection:

Inverse select all:

Recommended: "uniapp tutorial"

The above is the detailed content of Examples to explain how uniapp implements the all-select function of multi-select boxes. For more information, please follow other related articles on the PHP Chinese website!