uni-app checkbox 全选的实现
H5部分代码
<view class="list-title row between">
<checkbox-group name="allCheck" @change="allChange">
<label class="row uni-list-cell uni-list-cell-pd">
<checkbox value="" :checked="allCheck.checked" />
<view>全选</view>
</label>
</checkbox-group>
</view>
<view class="list">
<checkbox-group @change="checkboxChange">
<view class="row between food-list" v-for="(item,index) in showList" :key="index">
<label class="row">
<checkbox :value="JSON.stringify(item)" :checked="item.checked" />
<view>{{item.name}}</view>
</label>
</view>
</checkbox-group>
</view>
js部分的代码
export default {
data() {
return {
allCheck: {
name: '全选',
value: 'all',
checked: false
}
}
},
created() {
this.init();
},
methods: {
//默认全部选中
init() {
this.showList.map(item => this.$set(item, 'checked', true));
this.$set(this.allCheck, 'checked', true);
},
//点击全部选中的事件
allChange(e) {
if (e.detail.value.length == 0) {
this.showList.map(item => this.$set(item, 'checked', false));
this.$set(this.allCheck, 'checked', false);
} else {
this.showList.map(item => this.$set(item, 'checked', true));
this.$set(this.allCheck, 'checked', true);
}
},
//点击列表中复选框的事件
checkboxChange(e) {
let values = e.detail.value;
this.outList = [];
for (let i = 0, lenI = values.length; i < lenI; ++i) {
const item = JSON.parse(values[i])
this.outList.push(item)
if (values.includes(item.value)) {
this.$set(item, 'checked', true)
} else {
this.$set(item, 'checked', false)
}
}
// 判断全选 选择框的状态
if (this.outList.length == this.showList.length) {
this.$set(this.allCheck, 'checked', true)
} else {
this.$set(this.allCheck, 'checked', false)
}
}
}
}
uni-app checkbox默认样式的更改
uni-checkbox .uni-checkbox-input {
border-radius: 50% !important;
transform:scale(0.8)
}
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
background-image: url(./static/icon/checked.png);
background-size: 100%;
}
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
width: 20rpx;
height: 20rpx;
line-height: 20rpx;
text-align: center;
font-size: 0px;
background-repeat: no-repeat;
border-color: #38CAED;
transform: translate(-80%, -50%) scale(1);
-webkit-transform: translate(-70%, -50%) scale(1);
}