uniapp full selection function production

There may be some bugs

Here are some explanations of each part

1. <template>part:

   • Create a checkbox group through <u-checkbox-group>labels, and all checkboxes in the group will share a data model.
   • v-modelThe directive is used to bind the value of the checkbox group, that is, the name of the selected checkbox.
   • placementProperty set to "column"means that the checkbox list will be arranged in columns.
   • @changeThe event listener is bound to checkboxChangethe method, which is triggered when the checkbox state changes.
   • Inside the checkbox group, use v-fora loop to loop through checkboxList1each object in the array and create the corresponding <u-checkbox>checkbox.
   • <u-checkbox>The element's properties set the checkbox's appearance and label, and associate the checkbox's state with the checked state in the data model.

2. <script>part:

   • dataTwo data properties are defined in : checkboxValue1and checkboxList1.
   • checkboxValue1Used to store the name of the selected check box, initially an empty array.
   • checkboxList1Contains an array of objects, each object represents a check box option, including the name and whether it is disabled.
   • methodsTwo methods are defined in :
     • checkboxChangeMethod used to handle check box state change events. In this example, it simply prints out the changed information.
     • selectAllMethod for selecting all functionality. Based on the number of currently selected checkboxes and the total number of checkboxes, it updates checkboxValue1the array to select or deselect all. At the same time, it also outputs the selected status information on the console.

Without further ado, let’s get straight to the code.

<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"		
        >
            <u-checkbox
			shape="circle"
                size='60rpx'
                labelSize='50rpx'
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </u-checkbox>
        </u-checkbox-group>

        <!-- 添加全选按钮 -->
        <u-checkbox
		shape="circle"
            size='60rpx'
            labelSize='50rpx'
            :label="'全选'"
            @change="selectAll"
        >
        </u-checkbox>
    </view>
</template>

<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }
    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        },
        selectAll() {
            // 点击全选按钮时，更新所有复选框的选中状态
            if (this.checkboxValue1.length === this.checkboxList1.length) {
                this.checkboxValue1 = [];
				console.log(this.checkboxValue1,1);
				console.log(this.checkboxList1,1);
            } else {
                this.checkboxValue1 = this.checkboxList1.map(item => item.name);
				console.log(this.checkboxValue1,1);
				console.log(this.checkboxList1,2);
            }
        }
    }
}
</script>