首先项目中购物车列表是v-for 动态渲染的数据，其中checkbox组件包含在每个li中动态渲染出来，在做全选的时候是没有问题的，因为全选按钮是在页面写死的，在做单个按钮选择的时候this.$refs.name.checked获取得到undefined。

1.jpg

这一点官方已经早就交代过，动态渲染的ref可能不会获取到DOM

QQ截图20190715171110.jpg

然而，实际发现，$refs.name获取的是一个数组，数组点属性肯定是undefined。
那么首先要获取到每一个checkbox的checked属性肯定需要用到index，那么，在v-for的时候就可以把index传进来，并且传给@changde方法中，这样就可以获取到每个checkbox的checked了，然后关联判断选择状态，代码如下：

组件中代码

                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle">
                        <div class="cart-left">
                            <div class=" mui-checkbox">
                                <input name="checkbox" value="Item 1" type="checkbox" ref="checkbox" @change="checked(index)">
                            </div>
                        </div>
                        <div class="cart-image">
                            <img :src="item.msrc" alt="">
                        </div>
                        <div class="cart-right">
                            <p>{{item.title}}</p>
                            <p class="maxnum">库存：<span id="maxnum">{{item.maxnum}}</span></p>
                            <p class="cart-price"><span>￥{{item.price}}</span>
                                <cartnumbox :initcount="item.count" :maxnum="item.maxnum" @getnum="getnum"></cartnumbox>
                            </p>
                        </div>
                    </div>
                </li>

methods

            checkAll() {
                    if (this.$refs.checkAll.checked) {
                        mui(this.$refs.checkbox).each(function() {
                            this.checked = true;
                        });
                        this.checkednum = mui(this.$refs.checkbox).length;
                    } else {
                        mui(this.$refs.checkbox).each(function() {
                            this.checked = false;
                        });
                        this.checkednum = 0;
                        this.checkboxsum = 0;
                    }
                    console.log('总数' + this.checkboxsum);
                    console.log('选择数' + this.checkednum);
                },
                //单个选择
                checked(index) {
                    this.checkboxsum = mui(this.$refs.checkbox).length;
                    console.log(this.$refs.checkbox[index].checked);
                    if (this.$refs.checkbox[index].checked) {
                        //选择的个数保存到data中
                        this.checkednum++;
                    } else {
                        this.checkednum--;
                    }
                    if (this.checkednum == this.checkboxsum) {
                        this.$refs.checkAll.checked = true;
                    } else {
                        this.$refs.checkAll.checked = false;
                    }
                    console.log('总数' + this.checkboxsum);
                    console.log('选择数' + this.checkednum);
                }

最后效果

checkbox1.gif