wxml：
js：
Page({
data: {
checkedAll: "",
items: [{
value: 'USA',
name: '美国'
},
{
value: 'CHN',
name: '中国',
checked: 'true'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
}
]
},
checkboxChange(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
const items = this.data.items
const values = e.detail.value
for (let i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value === values[j]) {
items[i].checked = true
break
}
}
}
this.setData({
items
})
if (e.detail.value.length == 6) {
console.log(this.data.checkedAll);
this.setData({
checkedAll: true
})
}else{
this.setData({
checkedAll: ""
})
}
},
checkboxAll(e) {
if (e.detail.value.length == 1) {
// 全选状态
const items = this.data.items
for (let i = 0; i < items.length; i++) {
items[i].checked = true
}
this.setData({
items
})
} else {
// 没有全选状态
const items = this.data.items
for (let i = 0; i < items.length; i++) {
items[i].checked = false
}
this.setData({
items
})
}
}
})
wxss：
/* 未选中的背景样式 */
checkbox .wx-checkbox-input{
width: 28rpx;
height: 28rpx;
border-color: #999;
}
/* 选中后的背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked,.checked{
background-color: #fff;
border-color: #ff3333;
}
/* 选中后的勾子样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 50%;
text-align: center;
font-size:32rpx;
color: #ff3333;
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
参考链接
发表评论