我的复选框判断逻辑不知道为什么并没有生效，请帮我检查是哪里不对

<template>
<view>
<view class="container">
<uni-nav-bar :class="'navBarClass green-background'" left-text="< 返回" right-text="下一页 >" @clickLeft="goToLastPage" @clickright="goToNextPage">
<view class="text-title">交安调查记录表</view>
</uni-nav-bar>
</view>
<view class="subtitle-box">
<text class="subtitle">一、隧道信息标志</text>
</view>
<view class="loadfacests">
<checkbox-group class="ED" v-model="selectedOptions">
<checkbox v-for="EDoption in EDoptions" :key="EDoption" :value="EDoption" @change="handleCheckboxChange">
{{ EDoption }}
</checkbox>
</checkbox-group>
</view>
<view>
<button @click="handleCheck">检查</button>
</view>
<view v-if="isMessageShown" class="message-box" @click="hideMessage">
<text>{{ message }}</text>
</view>
<!-- <view class="subtitle-box">
<text class="subtitle">二、设置位置</text>
</view> -->
</view>
</template>

<script>
export default {
data() {
return {
EDoptions: ['有标志','无标志','隧道长度>500m,宜设标志','隧道长度<500m'],
inspectionUnit: '',
message: '',
selectedOptions: [],
isMessageShown: false,
inputStyle: {
width: '100%',
height: '40px',
padding: '0 10px',
border: '1px solid transparent',
borderTop: '1px solid #ccc',
borderBottom: '1px solid #ccc',
backgroundColor: '#FFFFFF',
boxSizing: 'border-box',
fontSize: '14px',
marginBottom: '0px',
},
}
},
methods: {
goToLastPage(){
uni.navigateBack({
url: '../../../pages/tabbar/BlankPagesco/BlankPagesco'
});
},
goToNextPage(){
// this.$router.push('pages/tabbar/BlankPagesco/BlankPagesco')
uni.navigateTo({
url: '/pages/tabbar/confrimstrip/confrimstrip'
});
},
handleCheck(){
if (this.selectedOptions.length !== 2) {
this.message = '请依次勾选标志选项和隧道长度选项。';
} else if ((this.selectedOptions.includes('有标志') && this.selectedOptions.includes('隧道长度>500m,宜设标志')) || (this.selectedOptions.includes('无标志') && this.selectedOptions.includes('隧道长度小于500m'))) {
this.message = '合格';
} else if (this.selectedOptions.includes('无标志') && this.selectedOptions.includes('隧道长度>500m,宜设标志')) {
this.message = '宜设未设';
} else {
this.message = '未知条件，请重新选择。';
}

                this.isMessageShown = true;  
                setTimeout(() => {  
                this.isMessageShown = false;  
            }, 5000); // Change 5000 to desired duration  
        },  
        hideMessage() {  
            this.isMessageShown = false;  
        },  
        handleCheckboxChange() {  
            // 当勾选框发生改变时，重新触发判断逻辑  
            console.log('当前勾选框的值：', this.$refs.checkboxGroup.value);  
                // 更新selectedOptions数组  
            this.selectedOptions = this.$refs.checkboxGroup.value;  
                // 打印更新后的selectedOptions数组  
            console.log('更新后的selectedOptions数组：', this.selectedOptions);  
                // 重新触发判断逻辑  
            this.handleCheck();  
        }  
    }  
}  

</script>

<style lang="scss" scoped>
.navBarClass {
// display: flex; / 使用Flexbox布局 /
justify-content: space-between; / 水平居中 /
align-items: center; / 垂直居中 /
height: 44px; / 导航栏的高度，可根据实际情况调整 /
// background-color: #00b783;
}
.text-title{
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
font-size: 18px;
font-weight: bold;
color: #000000;
// margin-left: 18%;
}
.subtitle-box {
padding: 8px;
border:1px solid #c0c0c0;
background-color: #00b783;
width: 100%;
max-width: 600px;
margin: auto;
margin-bottom: 0px;
}
.subtitle{
font-size: 16px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
}
.ED{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
// min-height: 100vh;
width: 100%;
margin: auto;
// padding:5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;

    }  
    .ED checkbox{     
        flex: 1 1 auto;  
        margin-right: 5px;  
        margin-top: 10px;  
        white-space: nowrap;  
    }  
    .message-box {  
            position: fixed;  
            top: 50%;  
            left: 50%;  
            transform: translate(-50%, -50%);  
            background-color: rgba(0, 0, 0, 0.8);  
            color: #fff;  
            padding: 10px 20px;  
            border-radius: 5px;  
            cursor: pointer;  
            z-index: 9999;  
            animation: fadeOut 5s ease forwards;  
    }  

    @keyframes fadeOut {  
        0% { opacity: 1; }  
        100% { opacity: 0; }  
    }  

</style>