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

 更新时间:2022年07月18日 14:10:08   作者:凡小多  
这篇文章主要为大家详细介绍了微信小程序实现多选框全选操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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
            })
        }
    }
})

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • php输出全部gb2312编码内的汉字方法

    php输出全部gb2312编码内的汉字方法

    下面小编就为大家带来一篇php输出全部gb2312编码内的汉字方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 通过实例讲解JS如何防抖动

    通过实例讲解JS如何防抖动

    这篇文章主要介绍了通过实例讲解JS如何防抖动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • js中eval方法详解之eval方法的初级应用

    js中eval方法详解之eval方法的初级应用

    js中eval()函数可计算某个字符串,下面这篇文章主要给大家介绍了关于js中eval方法详解之eval方法的初级应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • JS跳出循环的方法区别对比分析(break,continue,return)

    JS跳出循环的方法区别对比分析(break,continue,return)

    面向对象编程语法中我们会碰到break ,continue, return这三个常用的关键字,那么关于这三个关键字的使用具体的操作是什么呢?接下来通过本文给大家讲解JS跳出循环的方法区别对比分析(break,continue,return),感兴趣的朋友一起看看吧
    2023-02-02
  • 点击隐藏页面左栏或右栏实现js代码

    点击隐藏页面左栏或右栏实现js代码

    通过点击来隐藏页面左栏或右栏,此效果在实际应用中很常见,接下来为大家详细介绍下实现代码,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-04-04
  • JavaScript Canvas实现图片局部放大镜效果

    JavaScript Canvas实现图片局部放大镜效果

    这篇文章主要为大家详细介绍了如何使用JavaScript Canvas实现图片局部放大镜效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • 如何在 JavaScript 中更好地利用数组

    如何在 JavaScript 中更好地利用数组

    这篇文章主要介绍了如何在 JavaScript 中更好地使用数组,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Javascript幻灯片播放功能实现过程解析

    Javascript幻灯片播放功能实现过程解析

    这篇文章主要介绍了Javascript幻灯片播放功能实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号

    浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号

    这篇文章主要介绍了浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号的相关资料,需要的朋友可以参考下
    2016-03-03
  • 教你修改element-ui源码给el-dialog添加全屏功能

    教你修改element-ui源码给el-dialog添加全屏功能

    el-dialog组件提供了fullscreen功能,但是无法满足业务需求。系统使用了许多dialog,不方便重新封装dialog组件,故直接对源码进行修改,这篇文章主要介绍了修改element-ui源码给el-dialog添加全屏功能,需要的朋友可以参考下
    2022-11-11

最新评论