网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序頁面效果--多選框(類似選擇題)

發布時間: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
本文地址:http://www.xiuhaier.com/wxmini/doc/course/18331.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×