diff --git a/packages/components/checkbox/__tests__/checkbox.test.tsx b/packages/components/checkbox/__tests__/checkbox.test.tsx
index 04323ff8ce..44c64e0b16 100644
--- a/packages/components/checkbox/__tests__/checkbox.test.tsx
+++ b/packages/components/checkbox/__tests__/checkbox.test.tsx
@@ -1,7 +1,7 @@
-import { nextTick, ref } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'
-import { ElFormItem } from '@element-plus/components/form'
+import { ElForm, ElFormItem } from '@element-plus/components/form'
import Checkbox from '../src/checkbox.vue'
import CheckboxButton from '../src/checkbox-button.vue'
import CheckboxGroup from '../src/checkbox-group.vue'
@@ -162,6 +162,43 @@ describe('Checkbox', () => {
expect(checkList.value).toContain('b')
})
+ test('checkbox group with dynamic modelValue', async () => {
+ const form = reactive<{ checked: string }>({ checked: '' })
+ const wrapper = mount({
+ setup() {
+ return () => (
+
+
+ {
+ form.checked = val.filter(Boolean).join(',')
+ }}
+ >
+
+
+
+
+
+ )
+ },
+ })
+ const checkboxA = wrapper.findComponent({ ref: 'a' })
+ await checkboxA.trigger('click')
+ expect(form.checked).toBe('a')
+ const checkboxB = wrapper.findComponent({ ref: 'b' })
+ await checkboxB.trigger('click')
+ expect(form.checked).toBe('a,b')
+ form.checked = ''
+ await nextTick()
+ expect(checkboxA.classes()).not.toContain('is-checked')
+ expect(checkboxB.classes()).not.toContain('is-checked')
+ })
test('checkbox group without modelValue', async () => {
const checkList = ref([])
const wrapper = mount({
diff --git a/packages/components/checkbox/src/checkbox-group.vue b/packages/components/checkbox/src/checkbox-group.vue
index 69e0319553..8753700c11 100644
--- a/packages/components/checkbox/src/checkbox-group.vue
+++ b/packages/components/checkbox/src/checkbox-group.vue
@@ -15,7 +15,7 @@