微信小程序实现多选框全选操作

本文实例为大家分享了微信小程序实现多选框全选的具体代码，供大家参考，具体内容如下

test.wxml

<view class="container">
    <!-- 多选框 -->
    <view class="page-body">
        <view class="page-section">
            <view class="page-section-title">推荐展示样式</view>
            <view class="weui-cells weui-cells_after-title">
                <checkbox-group bindchange="checkboxChange">
                    <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
                        <view class="weui-cell__hd">
                            <checkbox value="{{item.value}}" checked="{{item.checked}}" />
                        </view>
                        <view class="weui-cell__bd">{{item.name}}</view>
                    </label>
                </checkbox-group>
            </view>
        </view>
    </view>
    <text>全选</text>
    <checkbox-group bindchange="checkboxAll">
        <checkbox checked="{{checkedAll}}" />
    </checkbox-group>
</view>

test.js

Page({
    data: {
        checkedAll: "",
        items: [{
                value: 'USA',
                name: '美国'
            },
            {
                value: 'CHN',
                name: '中国',
                checked: 'true'
            },
            {
                value: 'BRA',
                name: '巴西'
            },
            {
                value: 'JPN',
                name: '日本'
            },
            {
                value: 'ENG',
                name: '英国'
            },
            {
                value: 'FRA',
                name: '法国'
            }
        ]
    },
    checkboxChange(e) {
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
        const items = this.data.items
        const values = e.detail.value
        for (let i = 0, lenI = items.length; i < lenI; ++i) {
            items[i].checked = false
            for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
                if (items[i].value === values[j]) {
                    items[i].checked = true
                    break
                }
            }
        }
        this.setData({
            items
        })
        if (e.detail.value.length == 6) {
            console.log(this.data.checkedAll);
            this.setData({
                checkedAll: true
            })
        }else{
            this.setData({
                checkedAll: ""
            })
        }
    },
    checkboxAll(e) {
        if (e.detail.value.length == 1) {
            // 全选状态
            const items = this.data.items
            for (let i = 0; i < items.length; i++) {
                items[i].checked = true
            }
            this.setData({
                items
            })
        } else {
            // 没有全选状态
            const items = this.data.items
            for (let i = 0; i < items.length; i++) {
                items[i].checked = false
            }
            this.setData({
                items
            })
        }
    }
})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。