vue的checkbox多选框获取其是否选中和获取其自定义属性值
1.第一种情况点击一个全选按钮使下面的所有的checkbox多选框选中或取消选中。如下图:注意:此处的checkbox是用原生的input 标签,并不是<el-checobox>标签,如果使用el标签,只有change事件,没有click事件,不能传参 $event ,所以就无法获取到是否选中的状态,后续会有很多问题。所以建议使用input标签的原生Ch...
1.第一种情况点击一个全选按钮使下面的所有的checkbox多选框选中或取消选中。如下图:
注意:此处的checkbox是用原生的input 标签,并不是<el-checobox>标签,
如果使用el标签,只有change事件,没有click事件,不能传参 $event ,所以就无法获取到是否选中的状态,后续会有很多问题。所以建议使用input标签的原生CheckBox。
获取这个多选框的选中还是没有选中的状态
首先给这个全选的input多选框定义一个点击事件,给点击事件传入参数$event,从$event里面获取这个checkbox 选中状态true或false
2.第二种情况是获取循环生成的多个name相同的checkbox的一个多个选中的状态。
首先在这些循环的父级元素加上一个ref="",来获取父级元素
注意:
然后根据这个ref来获取所有的input多选框
获得的checkDom是一个数组,拥有数组的方法,循环查看有哪些是选中的
代码中的checkDom[i].dataset.id是用来获取input多选框自定义属性data-id的值,比如这个data-id的值是确定这一行信息的id值,用来删除这一行
最后所有选中的input多选框的data-id的值多放在了idArray里面了。
更多推荐
所有评论(0)