vue中如何获取选中的checkbox的value值

Posted 2023-04-19

参考技术A 通常情况下，我们可能会用v-for循环出一堆checkbox，提交数据的时候需要去获取选中的checkbox的value值，之前我的获取方式是给checkbox添加点击事件，这样确实能解决问题，但是总觉得有更好的办法，因为同为form表单元素的文本框就可以使用v-model来实现数据双向绑定，难道checkbox不能实现数据双向绑定吗？

呵呵哒，真的可以，我一直都不知道。。。。。。。。。

<input  type="checkbox"  v-model="checkFlag">

data ()

    return

            checkFlag: true    //checkbox默认选中

    



上面是最简单的用法，那如果使用场景是：购物车里循环遍历了所有用户添加的商品，用户选中一些商品，去结算，我们需要在结算的时候获取所有选中的checkbox的value值；

页面的大概效果如下：

这里我们给checkbox绑上了v-model的属性，以及value属性，checkedArr是一个数组，用来放选中的item.name，当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化；

强调最重要的一点，v-model会在checkbox选中的时候，自动将当前的value值push进数组；在取消checkbox的时候，自动将当前的value值pop出数组。

以下是依次选中四个商品，然后取消商品4，打印的checkedArr的值

至于全选按钮什么时候选中，那我们可以watch一下checkedArr：

在vue中使用checkbox

参考技术A 在vue项目中如何使用多选框？结合前段时间工作中的需求写了这个笔记。

在template里面写入<input>标签并指定类型type为checkbox，:value用来绑定当前项的value，v-model绑定一个数组，一旦当前项被选中，该项的value会被添加至被绑定的数组中。

place为绑定的数组，具体效果如下图所示