uni-app 中怎么获取所有checkbox 选中的值 电脑版发表于:2024/9/20 11:09 官方文档:https://uniapp.dcloud.net.cn/component/checkbox.html 这个文档的示例真的太少了,就光一个获取所有checkbox 选中的值都没有..... #### template ``` <checkbox-group @change="methods.checkboxChange"> <template v-for="(item, index) in state.messages" :key="index"> <checkbox :value="item.id" checked="true" /> </template> </checkbox-group> ``` #### Script 下面的方法有两个,一个是绑定的checkbox-group的改变事件,在这个事件中可以获取到所有选中的值,就是`_params.detail.value`。但是如果没有改变过复选框的选中状态就是默认的获取状态,可以获取所有选中的时候还要根据这两种情况来进行判断,感觉还是挺麻烦的如果给checkbox-group封装一个v-model直接绑定一个列表就是所有选中的值多好,但是试了一下并不支持。 下面的getAllChoise方法就是获取所有checkbox 选中的值,具体逻辑看注释把。 ``` const state = reactive({ messages: [], // 用于存储所有选中的checkbox的值 checkedList: [], // 是否改变了复选框的选中状态 isChangeChoise:false, }); const methods = { checkboxChange(_params){ console.log("获取复选框选中的值",_params.detail.value); state.checkedList = _params.detail.value state.isChangeChoise=true }, getAllChoise() { let allChoise = [] // 如果复选框改变过就以改变事件里边的来,否者默认就是当前数据源的全部 if(state.isChangeChoise){ console.log("没复选框改变过就以改变事件里边的来") allChoise = state.checkedList } else{ console.log("没有改变过选中,默认就是当前数据源的全部") for (let index = 0; index < state.messages.length; index++) { const element = state.messages[index]; allChoise.push(element.id) } } console.log("看看所有选中的值", allChoise); // 转化成字符串形成方便回传到后台去操作 let allChoiseStr = "" for (let index = 0; index < allChoise.length; index++) { const element = allChoise[index]; allChoiseStr+= element+"," } console.log("看看转化成字符串的内容:", allChoiseStr); } } ```