微信小程序设置单选按钮

最新推荐文章于 2025-01-16 17:18:46 发布

原创最新推荐文章于 2025-01-16 17:18:46 发布 · 7.3k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中设置单选按钮，并实现检查所有问题是否已全部选择的功能。通过计算题目总数和选中选项数，比较两者是否相等来决定提交按钮是否可用。

当你需要提交一些需要单选的问题时，可以判断这些问题是否已经被全部选中，如果没有全部选中的话，可以让你的提交按钮不起作用（即无法点击提交）。要实现这个功能，首先你要计算题的总个数，然后算出你的选项和题号组成的数组里面的个数，最后，把两个获取到的数值进行对比，如果两个值相等，即可提交，否则提交不起作用。提交按钮控制函数（ btn_disabled: true）。

<radio-group class="radio-group" bindchange="radioChang" data-id="{{item.id}}">
           
          <view class='ra' bindtap='next'>
          <radio value="a!{{item.scorea}}"><text>A.{{item.itema}}</text></radio>
          </view>
          <view class='ra' bindtap='next'>
          <radio value="b!{{item.scoreb}}"><text>B.{{item.itemb}}</text></radio>
          </view>
          <view class='ra' bindtap='next' wx:if="{{item.itemc!=''}}">
          <radio value="c!{{item.scorec}}"><text>C.{{item.itemc}}</text></radio>
          </view>
          <view class='ra' bindtap='next' wx:if="{{item.itemd!=''}}">
          <radio value="d!{{item.scored}}"><text>D.{{item.itemd}}</text></radio>
          </view>
            
    </radio-group>

分析js:

radioChang: function (e) {
   
    console.log('radio发生change事件，携带value值为',e)
   
   var value = e.detail.value.split("!")
   var id = e.currentTarget.dataset.id
   var answer = {}
   answer = this.data.answer
   answer[id] = value[0]
   

   var score = {}
   score = this.data.score
   score[id] = value[1]
  this.setData({answer:answer,score:score});   

   var len = 0
   for(var i in answer){
      len++;
   }
   if(len<this.data.count){
     this.setData({btn_disabled:true});
   }else{
     this.setData({btn_disabled:false});
   }

  },