今天给看微信小程序多选框时,自己写了一个例子(类似选择题),希望对大家有帮助!
今天给看微信小程序多选框时,自己写了一个例子(类似选择题),希望对大家有帮助
多选框列表中,我添加了判断如果没有选任何一项,提交按钮是不能点击提交的;如果想要提示,把按钮的disabled属性删掉就行;
wxml:
-
<view class="container log-list">
-
<checkbox-group bindchange="checkboxChange">
-
<label class="checkbox" wx:for="{{items}}" wx:key="item">
-
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
-
</label>
-
</checkbox-group>
-
<button bindtap="submit" disabled="{{clickCheck}}">提交</button>
-
</view>
js:
-
var checkValue = [];
-
page({
-
data:{
-
items:[
-
{ name: 'USA', value: '美国'},
-
{ name: 'CHN', value: '中国'},
-
{ name: 'BRA', value: '巴西'},
-
{ name: 'JPN', value: '日本'},
-
{ name: 'ENG', value: '英国'},
-
{ name: 'TUR', value: '法国'}
-
],
-
// 绑定按钮是否可点
-
clickCheck:true
-
},
-
// 点击单选框
-
checkboxChange: function (e) {
-
checkValue = e.detail.value;
-
// 判断是否选择了,如果选择了,才能点击按钮
-
if (e.detail.value[0]){
-
this.setData({
-
clickCheck: false
-
})
-
}else{
-
this.setData({
-
clickCheck: true
-
})
-
}
-
},
-
// 点击表单提交
-
submit:function(){
-
// 如果checkValue有值,说明选择了,可以提交
-
if (checkValue[0]){
-
wx.showToast({
-
title: '提交成功',
-
})
-
}else{
-
wx.showToast({
-
title: '未答题',
-
})
-
}
-
}
-
})