微信小程序的checkbox清空功能主要用于提交接口后的操作，虽然提交接口后重新调用下列表的接口也可实现清空效果，但是还需要调用一次后台，并不完美，之前写了一篇uniapp开发微信小程序实现多选全选反选功能，这篇文章主要是实现了checkbox的样式，点击表头全选反选功能，但是提交接口时后写了个函数清空已选时发生了一些问题，就是我不点击全选，直接一个个点击选择，清空竟然失效，数据没问题，但是视图层不渲染，也就是明明清空了，可看着还是打勾状态，后来发现可能是小程序的机制问题，不知算不算bug，在清空函数里写的很正确的逻辑不能用，又写了个明显有问题的逻辑竟然可以用，并且视图和数据都正常，下面分享给大家。

这是uniapp运行的微信小程序，原生的修改下html语法，主要修改html部分的事件写法，将@替换成bind,具体看下官网例子。uniapp直接复制到空白页面运行即可

<template>
	<view class="content">
		<view class="index_bottom">
			<view class="contrastbox">
				<view class="history-table-wrap">
					<view class="table">
						<view class="tr">
							<!-- 此处控制全选，反选切换 -->
							<view class="th th1">
								<checkbox @tap.stop="selectall" :checked="select_all"></checkbox>
								序号
							</view>
							<view class="th th2">名称</view>
							<view class="th th3">电量(kWh)</view>
							<view class="th th4">状态</view>
						</view>
						<view class="" style="width: 100%;margin: 0 auto;height:579rpx;overflow: auto;">
							<checkbox-group @change.stop="checkboxChange">
								<view class="tr" v-for="(i, index) in liebiaos" :style="(index + 1) % 2 == 1 ? 'background:#f5f5f5' : ''" :key="index">
									<view class="td td1">
										<checkbox :value="i.id" :checked="i.checked" @click="qudong(index)"></checkbox>
										{{ index + 1 }}
									</view>
									<view class="td td2">{{ i.name }}</view>
									<view class="td td3">{{ i.name1 }}</view>
									<view class="td td4">{{ i.name2 }}</view>
								</view>
							</checkbox-group>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" @click="qingkong()">清空</view>
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			select_all: false, //是否为全选状态，true为是
			batchIds: [], //选中的ids  将它传给后台就可以，这就是选择的结果
			liebiaos: [
				{
					name: '名字1',
					name2: '字段1',
					name2: '字段1',
					id: 1,
					checked:false,
					
				},
				{
					name: '名字2',
					name2: '字段2',
					name2: '字段2',
					id: 2,
					checked:false,
				},
				{
					name: '名字3',
					name2: '字段3',
					name2: '字段3',
					id: 3,
					checked:false,
				},
				{
					name: '名字4',
					name2: '字段4',
					name2: '字段4',
					id: 4,
					checked:false,
				},
				{
					name: '名字5',
					name2: '字段5',
					name2: '字段5',
					id: 5,
					checked:false,
				},
				{
					name: '名字6',
					name2: '字段6',
					name2: '字段6',
					id: 6,
					checked:false,
				}
			]
		};
	},
	onLoad() {
		that = this;
	},
	methods: {
		//全选与反全选
		selectall: function(e) {
			var arr = []; //存放选中id的数组
			if (that.select_all == false) {
				for (let i = 0; i < that.liebiaos.length; i++) {
					that.liebiaos[i].checked = true;
					// 全选获取选中的值
					arr.push(that.liebiaos[i].id);
				}
				that.select_all = true;
			} else {
				for (let i = 0; i < that.liebiaos.length; i++) {
					that.liebiaos[i].checked = false;
					// 全选获取选中的值
					arr = [];
				}
				that.select_all = false;
			}

			that.batchIds = arr;
			console.log(that.batchIds);
		},

		// 点击单个选择
		checkboxChange: function(e) {
			that.batchIds = e.detail.value;
			if (that.batchIds.length < that.liebiaos.length) {
				that.select_all = false;
			} else {
				that.select_all = true;
			}
			console.log(that.batchIds)
		},
		// 点击单个选择时由于没找到获取索引值的方法,liebiaos内的某个checked的状态值无法改变,会造成先点击全选,然后点击单个取消其中一个后,在点击全选视图不会渲染,还是有一个未选择的,原因是当我们点击单个选择时虽然改变了视图,但并未改变自身真实的checked值,所以在次点击全选时试图不会更新,因为数据没有改变.
		qudong(i) {
			if(that.liebiaos[i].checked==true){
				return false;
			}
			this.liebiaos[i].checked=true
		},
		qingkong() {
			for (let i = 0; i < that.liebiaos.length; i++) {
				this.$set(this.liebiaos[i], 'checked', false);
			}
			that.liebiaos = that.liebiaos;
			that.select_all = false;
			that.batchIds=[];
			console.log(that.batchIds)
		}
		
	}
};
</script>

<style>
* {
	margin: 0;
	padding: 0;
}
.content {
	width: 100%;
	overflow: auto;
	min-height: 100vh;
	background: #f5f5f5;
}
.index_bottom {
	width: 690rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(87, 182, 230, 0.21);
	margin: 0 auto;
	border-radius: 20rpx;
	position: relative;
	margin-bottom: 30rpx;
	padding: 30rpx 0;
	height: 750rpx;
}
.contrastbox {
	position: relative;
	width: 627rpx;
	margin: 0 auto;
	padding-top: 16rpx;
	height: 656rpx;
}

.contrastbox_title {
	font-size: 23rpx;
	color: #8e8c8c;
}
.history-table-wrap {
	position: relative;
	width: 627rpx;
	overflow-y: scroll;
	overflow-x: hidden;
}
/* 表格代码   */
.table {
	border: 1px solid #dadada;
	border-right: 0;
	border-bottom: 0;
	width: 99%;
}

.tr {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.th,
.td {
	padding: 10px;
	border-bottom: 1px solid #dadada;
	border-right: 1px solid #dadada;
	text-align: center;
	width: 25%;
}

.th1,
.th2,
.td3,
.td4 {
	width: 25%;
}

.th {
	font-weight: 800;
	background-color: #fff;
	font-size: 22rpx;
	color: #000;
}

.td {
	font-size: 20rpx;
	color: #000;
}
/* ------------------------------设置选框样式------------------- */
checkbox .wx-checkbox-input {
	width: 25rpx;
	height: 25rpx;
	border-radius: 50%;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	background: #0394f0;
	border-color: #0394f0;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	width: 18rpx;
	height: 18rpx;
	line-height: 18rpx;
	text-align: center;
	font-size: 22rpx;
	color: #fff;
	background: transparent;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}
</style>