频道栏目
首页 > 微信学院 > 微信小程序 > 正文
微信小程序页面效果-多选框(类似选择题)实战教程
2018-01-13 09:22:54      个评论      
收藏   我要投稿

今天给看微信小程序多选框时,自己写了一个例子(类似选择题),希望对大家有帮助

多选框列表中,我添加了判断如果没有选任何一项,提交按钮是不能点击提交的;如果想要提示,把按钮的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: '未答题',
})
}
}
})

 

点击复制链接 与好友分享!回本站首页
上一篇:微信小程序开发之用Promise 封装API
下一篇:微信小程序快速上手:框架以及主体新手教程
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站