Page({
data: {
items: [
{ name: ‘USA‘, value: ‘美国‘, checked: false },
{ name: ‘CHN‘, value: ‘中国‘, checked: true },
{ name: ‘BRA‘, value: ‘巴西‘, checked: false },
{ name: ‘JPN‘, value: ‘日本‘, checked: false },
{ name: ‘ENG‘, value: ‘英国‘, checked: false },
{ name: ‘TUR‘, value: ‘法国‘, checked: false },
]
},
checkboxChange: function (e) {
console.log(‘checkbox发生change事件，携带value值为：‘, e.detail.value)
},
//添加class 样式
addclass:function(e){
let self = this
//获取数据
let list = self.data.items
//获取index
let index = e.currentTarget.dataset.index
//如果为true变为false
if(list[index].checked){
list[index].checked=false
}else{
list[index].checked = true
}
//重新赋值
self.setData({
items:list
})
},
})
这样一个简单的 多选按钮就做出来了
效果图如下 样式可以自己修改
