uniapp使用uview-ui的checkbox复选框，全选与全不选功能

代码：

<template>
    <!-- 28.报警管理-报警列表 -->
    <view class="batchManagement">
        <!-- 自定义导航栏 -->
        <view style="">
            <!-- 2.0.19支持autoBack，默认为false -->
            <u-navbar title="报警管理" @rightClick="rightClick" :placeholder="true" :autoBack="true">
                <view class="batchManagement_text" slot="right">
                    历史报警
                </view>
            </u-navbar>
        </view>
        <!-- 设备故障 -->
        <view class="Batch_number_public">
            
            
            <view class="Batch_number_public_a">
                <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
                    <u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
                        :label="item.name" :name="item.name" :checked="item.checked" shape="circle">
                    </u-checkbox>
                </u-checkbox-group>
            </view>

            <view class="Batch_number_public_b">
                <view class="">
                    <text class="aSo1_b">设备故障</text>
                </view>
                <view class="">
                    <text class="aSo1_a">#1号产线 &nbsp 搅拌机</text>
                </view>
            </view> 
            <view class="Batch_number_public_c">
                处理
            </view>
            
        </view>
        
        <!-- 处理 -->
        <view class="merge_Public_Button">
            <view class="merge_Public_Button_a" style="margin-left: 15rpx;margin-top: 15rpx;">
                <u-checkbox-group name="allCheck" @change="changeAll">
                    <u-checkbox :customStyle="{marginBottom: '8px'}" 
                         shape="circle">
                    </u-checkbox>
                </u-checkbox-group>
               
            </view>
            <view class="merge_Public_Button_b">
                全选
            </view>
            <view class="merge_Public_Button_c">
                <text>共</text>
                <text style="color: #F99B04;">3</text>
                <text>项</text>
            </view>
            <view class="merge_Public_Button_d">
                处理
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                // value: '',
                keyword: '',
                checkboxValue1: [],
                checkboxValue2: [],
                // 基本案列数据
                checkboxList1: [
                {
                    id:1,
                    name: '设备故障',
                    disabled: false,
                    checked: false
                },
                {
                    id:2,
                    name: '设备故障2',
                    disabled: false,
                    checked: false
                }
                ],
                allCheck: {
                    name: '全选',
                    values: 'all',
                    checked: true
                },
                checkLength: 0, //用来计录全选、全不选的checked统计
            }
        },
        onShow() {
            
        },
        methods: {
            checkboxChange(n) { //=============单个选中
                console.log('change', n);
                this.checkLength = n.length;
                
            },
            changeAll(e, data) {  //========全选方法
                // console.log('点击全选');

                if(this.checkLength == this.checkboxList1.length){ //当前选中的个数等于列表的数，说明当前已经全部选中了
                    this.checkboxList1.forEach(function(item, index){
                        item.checked = false; //设置全不选
                    })
                    this.checkLength = 0;
                }else{ //返之说明当前并没有全部选中
                    
                    this.checkboxList1.forEach(function(item, index){
                        item.checked = true; //设置全选中
                    })
                    this.checkLength = this.checkboxList1.length;
                }
                
            },
        }
    }
</script>

<style>
    page {
        background-color: #F9F9FC;
    }

    /* 自定义导航栏 */
    .batchManagement_text {
        font-size: 32rpx;
        ;
        color: #666666;
    }

    .batchManagement {
        width: 750rpx;
        background-color: #F9F9FC;
    }

   </style>

 

 

关键代码js参数：

data() {
            return {
                // value: '',
                keyword: '',
                checkboxValue1: [],
                checkboxValue2: [],
                // 基本案列数据
                checkboxList1: [
                {
                    id:1,
                    name: '设备故障',
                    disabled: false,
                    checked: false
                },
                {
                    id:2,
                    name: '设备故障2',
                    disabled: false,
                    checked: false
                }
                ],
                allCheck: {
                    name: '全选',
                    values: 'all',
                    checked: true
                },
                checkLength: 0, //用来计录全选、全不选的checked统计
            }
        },

 

 

关键代码js方法：

methods: {
            checkboxChange(n) { //=============单个选中
                console.log('change', n);
                this.checkLength = n.length;
                
            },
            changeAll(e, data) {  //========全选方法
                // console.log('点击全选');

                if(this.checkLength == this.checkboxList1.length){ //当前选中的个数等于列表的数，说明当前已经全部选中了
                    this.checkboxList1.forEach(function(item, index){
                        item.checked = false; //设置全不选
                    })
                    this.checkLength = 0;
                }else{ //返之说明当前并没有全部选中
                    
                    this.checkboxList1.forEach(function(item, index){
                        item.checked = true; //设置全选中
                    })
                    this.checkLength = this.checkboxList1.length;
                }
                
            },
        }

 

 

 

 

 

 

 

 

 

 

 

。