微信小程序的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>
你可能会用到以下内容：
微信小程序checkbox多选框如何修改宽高及选中样式