首先这是官网的用法:
代码非常的长,而且很难复用(不能多个复选框共用这个checkboxChange方法)
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
Page({
onShareAppMessage() {
return {
title: 'checkbox',
path: 'page/component/pages/checkbox/checkbox'
}
},
data: {
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
})
}
})
划分线,下面是更好的写法
触发checkboxChange的时候传一个key值过去,之后值对应的是一个新数组(与下面wx:for的数组不同),用来存放已选择的项
<wxs module="v1">
var include = function(array,value) {
var has = false;
for (var i = 0; i < array.length; ++i) {
if (array[i] == value){
has = true;
return has
}
}
return has;
}
module.exports.include = include;
</wxs>
<checkbox-group bindchange="checkboxChange" data-key="selectedArray">
<label wx:for="{{myArray}}" wx:key="index" >
<view>
<checkbox value="{{item.value}}" checked="{{v1.include(selectedArray,item.value)}}"/>
</view>
<view>{{item.name}}</view>
</label>
</checkbox-group>
因为 微信小程序中我们不能直接在wxml模板中使用includes方法(真是够落后的),所以只能用<wxs>自己定义一个,然后checked这样写,如果checked="{{item.checked}}"的话,选中状态的页面效果将不会存储起来.
为什么不用
var include = function(array,value) {
return array.indexOf(value) > -1
}
来实现include效果,因为传值的时候默认会把数字转成字符串传过去,[“1”,“2”].indexOf(2)就等于-1了,用上面的方法就避免了这个情况
data:{
myArray:[
{value: 'v1', name: '菠萝'},
{value: 'v2', name: '叉烧'},
],
selectedArray: [],
},
checkboxChange(e) {
let { key } = e.currentTarget.dataset;
this.setData({
[key]: e.detail.value
})
}
这里checkboxChange的意思就是把选中的值赋给我们传进来的参数(数组)
非常简洁,最重要的是,不管我们写了多少组checkbox-group,都能直接复用这个方法