推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序页面效果--多选框(类似选择题)
发布时间:2020-12-26
今天给看微信小程序多选框时，自己写了一个例子（类似选择题），希望对大家有帮助！
今天给看微信小程序多选框时，自己写了一个例子（类似选择题），希望对大家有帮助
多选框列表中，我添加了判断如果没有选任何一项，提交按钮是不能点击提交的；如果想要提示，把按钮的disabled属性删掉就行；
wxml：
<view class="container log-list">
<checkbox-groupbindchange="checkboxChange">
<labelclass="checkbox"wx:for="{{items}}"wx:key="item">
<checkboxvalue="{{item.name}}"checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
<buttonbindtap="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:'未答题',
})
}
}
})
