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

电玩女神 2022-03-18 09:37 625阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2][]

3. 运行效果：

源数据，红框中列是 id值：

![20190220143920148.png][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3][]

4. 后记：

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

Uncaught TypeError: Cannot read property 'push' of undefined

![20190220150917577.png][]

4.2 报错原因及解决：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 4][]

4.3 注意：

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

[Link 1]: https://www.captainai.net/jiangyu1013/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220318/22a5eefce6184d919e3f1e528aedb38c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220318/a6f9576729294520a3624f0394a1b4e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2]: /images/20220318/17adcf0aa02c46c0acc3b748774b5845.png
[20190220143920148.png]: /images/20220318/7aa139a87b114708a420c011b72ac732.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3]: /images/20220318/e70097d057fd41cda51ef3cb7f0f83d0.png
[20190220150917577.png]: /images/20220318/66c2038812be4668bcc5cb9dbb9d6cae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 4]: /images/20220318/7a691d5b888e4e048fb5c7335dc5c6b0.png