VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine

1. 表格生成后第一列是复选框,效果:

VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine_第1张图片

表格是直接循环展示的后台返回数据,代码写法:

VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine_第2张图片

2. 得复选框中已选中的值:

 // 得复选框已选中的值
      var boxs = $('input[name="userId"]');
      var userIds = [];
      for (var x in boxs) {
        if (boxs[x].checked) userIds.push(boxs[x].value);
      }
      alert(userIds);

VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine_第3张图片

3. 运行效果:

源数据,红框中列是 id值:

VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine_第4张图片

点击第一行数据时弹出提示,关闭提示后 id 为 1 的数据已经取消选选中。

 userIds 的值为:2,3,4,38,39,66 

VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine_第5张图片

4. 后记:

4.1 把这个方法抽离出来重用时遇到一个报错:

Uncaught TypeError: Cannot read property 'push' of undefined

 VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine_第6张图片

4.2 报错原因及解决:

这个属性不是当前调用对象 this.userIds 所有的:出错代码是蓝色框中代码,去掉 this 就可以了。

VUE项目中 获得多个复选框 checkbox 选中的值(jquery)+ 解决 Uncaught TypeError: Cannot read property 'push' of undefine_第7张图片

 

4.3 注意:

黄色框中代码不可少,否则会重复记录选中的 id 值 .

 

你可能感兴趣的:(前端,多个,复选框,选中,值,vue)