Bootstrap

微信小程序做全选、反选

实现的效果就是:
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
		})
},

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;