uni-app 内置组件checkbox实现全选功能

---

写这个教程的原因

由于uni-app的checkbox不能v-model双向绑定实现选中状态的切换，只能用单项绑定:checked实现状态的切换。这就非常的麻烦了下面我说一下解决方法.

---

思路来源

uniapp的checkbox 可以包裹一个checkbox-group标签，这玩意可以实现多选而且应用于列表循环多选非常方便，因为如下图：

它的detail.value为选中checkbox的value值数组,。如果要实现如下图所示的全选功能必须借助这个事件。

解决方法（教程）：

1.首先先通过计算属性为后端传来的对象数组增加checked属性

const itemsWithChecked = computed(() => {
  return items.value.map((item) => ({ ...item, checked: false }))
})

2.为v-for循环的每一个子项的checkbox 绑定checked，确保你的列表被checkbox-group包裹然后绑定changeCheckbox函数

只是一个例子
 <checkbox-group @change="changeCheckbox">
   <view v-for:item in xxx>
      <checkbox v-if="root" :value="item.name" class="check" :checked="item.checked" />
   </view>
 </checkbox-group>

3.单独弄一个checkbox作为全选按钮哦！为checkbox的checked属性设置一个单独的ref

const allCheck = ref(false)  然后加一个点击事件allChecked

4.接下来就到了书写js的时间了如下代码

//这个函数为checkboxgroup的change事件
const changeCheckbox: UniHelper.CheckboxGroupOnChange = (e) => {
//循环列表先都置为false （未选中状态）
  itemsWithChecked.value.forEach((a) => {
    a.checked = false
    allCheck.value = false
  })
//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
  itemsWithChecked.value.forEach((a) => {
    e.detail.value.forEach((b) => {
      if (a.name == b) {
        a.checked = true
      }
    })
  })
//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
  if (e.detail.value.length == itemsWithChecked.value.length) {
    allCheck.value = true
  }
//将选中的数组保存在某个ref中
  checkedData.value = e.detail.value
}

//这个函数单独控制全选按钮的状态 直接在这个全选按钮添加@tap点击事件就行
const allChecked = () => {
  //更改选中状态
  allCheck.value = !allCheck.value
  //如果全选全部置为ture
  if (allCheck.value == true) {
    itemsWithChecked.value.forEach((a) => {
      a.checked = true
    })
  } else {
    itemsWithChecked.value.forEach((a) => {
      a.checked = false
    })
  }
}

本教程只是一个思路，需要有uniapp vue3 ts基础哦 看不懂私信我 qq1174782213