快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)多選框全選操作

更新時間：2022年07月18日 14:10:08 作者：凡小多

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)多選框全選操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)多選框全選的具體代碼，供大家參考，具體內(nèi)容如下

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發(fā)生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) {
? ? ? ? ? ? // 全選狀態(tài)
? ? ? ? ? ? const items = this.data.items
? ? ? ? ? ? for (let i = 0; i < items.length; i++) {
? ? ? ? ? ? ? ? items[i].checked = true
? ? ? ? ? ? }
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? items
? ? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? ? // 沒有全選狀態(tài)
? ? ? ? ? ? const items = this.data.items
? ? ? ? ? ? for (let i = 0; i < items.length; i++) {
? ? ? ? ? ? ? ? items[i].checked = false
? ? ? ? ? ? }
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? items
? ? ? ? ? ? })
? ? ? ? }
? ? }
})

效果圖：