uniApp 多选框checkbox ，判断是否选中

╰半夏微凉° 2022-04-25 09:42 2747阅读 0赞

# uniApp 多选框checkbox ，判断是否选中 #

*![4a9631149e30a9b4cbc600f5a5e3200e.jpg][]*admin2019-04-25 【[Uni-App][]】 438人已围观

**简介**uniApp 多选框checkbox ,判断是否选中,还有获取值

这里是我遇到的一个坑，开始想着怎么处理，想了很久，还是想不出，没办法，只能跑去外面看看，突然看到一个小姐姐，然后找到了灵感。  
  
![f2d32cee0d3203092786af6cfdcb5413.png][]  
  
<checkbox :data-id="item.packboxId" :data-value="index" :value="'' + item.packboxId" :checked="item.checked" @click="checkBox($event, item)" />  
  
在开始加载的时候 动态设置:checked="item.checked" => false  
  
我在初始化的时候 循环遍历  
因为后台返回回来的数据没用 这个属性值，只能自己 动态加上  
  
that.enterData.forEach(item => \{  
item.checked = false;  
\});  
  
然后就是给勾选框 添加点击事件  
  
//勾选添加按钮  
checkBox(e, item) \{  
let that = this;  
let box = (item.checked = !item.checked);  
\},  
  
  
因为我这里要点击选几个来获取ID 传递数组给后台  
![fa61b19391cbe4b02d2ff9ea85cf452d.png][]  
  
这里通过点击事件来触发  
enter() \{  
let that = this;  
  
// 循环遍历ID  
that.serverData = \[\];  
that.enterData.forEach(item => \{  
if (item.checked == true) \{  
that.serverData.push(item.packboxId);  
\}  
\});  
\}  
  
然后就这样子获取了ID 以前我想的太复杂

[4a9631149e30a9b4cbc600f5a5e3200e.jpg]: https://www.auiaa.com/d/file/p/2018/12-23/4a9631149e30a9b4cbc600f5a5e3200e.jpg
[Uni-App]: https://www.auiaa.com/
[f2d32cee0d3203092786af6cfdcb5413.png]: https://www.auiaa.com/d/file/p/2019/04-25/f2d32cee0d3203092786af6cfdcb5413.png
[fa61b19391cbe4b02d2ff9ea85cf452d.png]: https://www.auiaa.com/d/file/p/2019/04-25/fa61b19391cbe4b02d2ff9ea85cf452d.png