小程序模板网

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

发布时间:2017-12-30 09:13 所属栏目:小程序开发教程

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

 
 
 

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

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

wxml:

 

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

js:

 

							
  1. var checkValue = [];
  2.  
  3. page({
  4.  
  5.    data:{
  6.  
  7. items:[
  8.  
  9. { name: 'USA', value: '美国'},
  10.  
  11. { name: 'CHN', value: '中国'},
  12.  
  13. { name: 'BRA', value: '巴西'},
  14.  
  15. { name: 'JPN', value: '日本'},
  16.  
  17. { name: 'ENG', value: '英国'},
  18.  
  19. { name: 'TUR', value: '法国'}
  20.  
  21.        ],
  22.  
  23. // 绑定按钮是否可点
  24.  
  25. clickCheck:true
  26.  
  27. },
  28.  
  29. // 点击单选框
  30.  
  31. checkboxChange: function (e) {
  32.  
  33. checkValue = e.detail.value;
  34.  
  35. // 判断是否选择了,如果选择了,才能点击按钮
  36.  
  37. if (e.detail.value[0]){
  38.  
  39. this.setData({
  40.  
  41. clickCheck: false
  42.  
  43. })
  44.  
  45. }else{
  46.  
  47. this.setData({
  48.  
  49. clickCheck: true
  50.  
  51. })
  52.  
  53. }
  54.  
  55. },
  56.  
  57. // 点击表单提交
  58.  
  59. submit:function(){
  60.  
  61. // 如果checkValue有值,说明选择了,可以提交
  62.  
  63. if (checkValue[0]){
  64.  
  65. wx.showToast({
  66.  
  67. title: '提交成功',
  68.  
  69. })
  70.  
  71. }else{
  72.  
  73. wx.showToast({
  74.  
  75. title: '未答题',
  76.  
  77. })
  78.  
  79. }
  80.  
  81. }
  82.  
  83. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18331.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询