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

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

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

效果图:

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

(0)

相关推荐

  • 微信小程序实现多选框全选与取消全选功能示例

    本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11

  • 微信小程序实现多选功能

    本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下 代码: <!--hotblood_gongkao/pages/answer/answer.wxml--> <!-- content --> <view class='answer-list'> <view class='answer-child'> <text class='answer-title'><text style='margin-right:28rpx;

  • 微信小程序实现多选删除列表数据功能示例

    本文实例讲述了微信小程序实现多选删除列表数据功能.分享给大家供大家参考,具体如下: 实现小程序一个类似多选列表删除的功能 <!-- 错题本 --> <view class="contarner"> <view class="content"> <view class="title flex-def flex-cCenter flex-zBetween"> <view>错题本(<te

  • 微信小程序实现多选框功能的实例代码

    我们先来看看效果: 两种状态: 选中/不选中 wxml <!-- 选择 S --> <view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}"

  • 微信小程序自定义多选事件的实现代码

    要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单的是自己绑定事件,然后切换选择和未选择的图片.而小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断. 直接上代码: wxml: <view class="sel-box"> /**用wx:for来进行列表渲染**/ <view wx:for="{{repContent}}" class="mu

  • 微信小程序复选框实现多选一功能过程解析

    这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 功能实现界面 data: { checkboxItems: [ { name: '全天(1-8节)', value: 'allday' }, { name: '上午(1-4节)', value: 'am' }, { name: '下午(5-8节)', value: 'pm' }, { name: '晚上(晚自习)', value: 'nigh

  • 微信小程序全选多选效果实现代码解析

    这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="memberList"> <view class="allSelect_box" bindtap='selectAll'> <checkbox class="checkbox" checked="{{sel

  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false

  • 微信小程序自定义组件实现多选功能

    本文实例为大家分享了微信小程序自定义组件实现多选的具体代码,供大家参考,具体内容如下 效果图: 调用部分(例如在index页面) index.wxml <view catchtap="showMultiple">   多选按钮   <multiple id="multiple" bind:multipleCancel="_multipleCancel" bind:multipleConfirm="_multipleCo

  • 微信小程序单选radio及多选checkbox按钮用法示例

    本文实例讲述了微信小程序单选radio及多选checkbox按钮用法.分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ v

随机推荐