微信小程序做全选、反选

实现的效果就是:
1.点击全选选中所有对象
2.点击全不选,取消勾选
3.点击反选,就不用多介绍了
4.在选中的同时获取需要的对象id
5.计数

点击反选或全不选

wxml关键代码
重要代码
value="{{item.id}}" -->checkbox被选中的值就是这个id, checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false未选中
checkbox-group的bindchange事件

<view class="hxt-new-indent hxt-flex-fill" style="overflow: hidden;">
        <!-- scroll-view为可滚动视图区域,里边的内容支持滚动-->
        <scroll-view class="hxt-butttons" scroll-y="true" show-scrollbar="false" enhanced="true" style="height: 100%;">
          <!-- 当前功能的重要代码片段,以上标签对可以不要-->
            <checkbox-group bindchange="checkboxChange">
                <view wx:for="{{checkboxItems}}" style="padding: 20rpx 0;" data-items="{{item}}">
                    <checkbox class="hxt-new-checkbox" checked="{{item.checked}}" value="{{item.id}}"><text
                            style="margin-left: 10rpx;">{{item.name}}</text>
                    </checkbox>
                </view>
            </checkbox-group>
        </scroll-view>
    </view>

js 关键代码

data: {
		//发送对象checkbox-group当前选中几项
		currentChecked: 0,
		//复选框选择
		checked: false,
		//复选框对象
		checkboxItems: [ ]
},
//全选-------绑定到全选按钮上去
selectAll() {
		let item = this.data.checkboxItems
		for (let i = 0; i < item.length; i++) {
			item[i].checked = true
		}
		this.setData({
			checkboxItems: item,
			showActionSheet_2: false,
			currentChecked: this.data.checkboxItems.length
		})
},
//反选----------绑定到反选按钮上去
ReverseSelection() {
		const list = []
		const items = this.data.checkboxItems
		for (let i = 0; i < items.length; i++) {
			items[i].checked = !items[i].checked //取反
			list.push(items[i])
		}
		// console.log(list)
		this.setData({
			showActionSheet_2: false,
			checkboxItems:list
		})
		let count=0
		for (let i = 0; i < list.length; i++) {
			if (list[i].checked===true) {
				count++
			}
		}
		this.setData({
			currentChecked:count
		})
},
//全不选------绑定到全不选按钮上去
Unselect() {
		let item = this.data.checkboxItems
		for (let i = 0; i < item.length; i++) {
			item[i].checked = false
		}
		this.setData({
			checkboxItems: item,
			showActionSheet_2: false,
			currentChecked: 0
		})
},
//checkbox-group中选中项发生改变(必须)
checkboxChange(e) {
		console.log(e)
		const list = this.data.checkboxItems
		const values = e.detail.value
		this.setData({
			currentChecked: e.detail.value.length
		})
		for (let i = 0, lenI = list.length; i < lenI; ++i) {
			list[i].checked = false
			for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
				if (list[i].id === values[j]) {
					list[i].checked = true
					break
				}
			}
		}
		this.setData({
			checkboxItems: list
		})
},
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值