微信小程序页面效果--多选框(类似选择题) - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序页面效果--多选框(类似选择题)

发表时间:2021-4-30

发布人:葵宇科技

浏览次数:103

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

多选框列表中,我添加了判断如果没有选任何一项,提交按钮是不能点击提交的;如果想要提示,把按钮的disabled属性删掉就行;

wxml:

  1. <view  class="container log-list">
  2. <checkbox-group bindchange="checkboxChange">
  3. <label class="checkbox" wx:for="{{items}}" wx:key="item">
  4. <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  5. </label>
  6. </checkbox-group>
  7. <button bindtap="submit" disabled="{{clickCheck}}">提交</button>
  8. </view>

js:

  1. var checkValue = [];
  2. page({
  3.    data:{
  4. items:[
  5. { name: 'USA', value: '美国'},
  6. { name: 'CHN', value: '中国'},
  7. { name: 'BRA', value: '巴西'},
  8. { name: 'JPN', value: '日本'},
  9. { name: 'ENG', value: '英国'},
  10. { name: 'TUR', value: '法国'}
  11.        ],
  12. // 绑定按钮是否可点
  13. clickCheck:true
  14. },
  15. // 点击单选框
  16. checkboxChange: function (e) {
  17. checkValue = e.detail.value;
  18. // 判断是否选择了,如果选择了,才能点击按钮
  19. if (e.detail.value[0]){
  20. this.setData({
  21. clickCheck: false
  22. })
  23. }else{
  24. this.setData({
  25. clickCheck: true
  26. })
  27. }
  28. },
  29. // 点击表单提交
  30. submit:function(){
  31. // 如果checkValue有值,说明选择了,可以提交
  32. if (checkValue[0]){
  33. wx.showToast({
  34. title: '提交成功',
  35. })
  36. }else{
  37. wx.showToast({
  38. title: '未答题',
  39. })
  40. }
  41. }
  42. })

相关案例查看更多