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;
                }
                
            },
        }

 

 

 

 

 

 

 

 

 

 

 

。