小程序复选框实现问卷的单选功能

小程序复选框实现问卷的单选功能

背景

环境 - 微信开发者工具Nightly v1.02.19，win10

需求 - 在小程序中做一个问卷填写页面，问卷中问题涉及到单项选择，考虑用到小程序提供的组件复选框，但是没有单项选择限制，需要自己实现其中的逻辑

UI设计

      <checkbox-group name="{{id}}" bindchange="checkboxChange">
        <label class="checkbox" wx:for="{{options}}" >
          <checkbox name="{{id}}" value="{{index}}" checked='false'/>{{item}}
        </label>
      </checkbox-group>

checkgroup代表一组复选框，其中每一个label都包含一个复选框checkbox

bindchange是绑定的事件，代表如果group中任一复选框的点击都会触发这个事件

wx:for是代表，复选框循环options的内容，即问题的四个选项，checked代表是否被选中的状态，{{item}}代表复选框具体内容

逻辑实现

checkboxChange: function(e) {
    var selected = e.detail.value;
    if (selected.length > 1) {
      var optionalAnswers = this.data.task.questionList[2].optionalAnswers;
      for (var i = 0; i < optionalAnswers.length; ++i) {
	   var isChecked = 'task.questionList[2].optionalAnswers[' + i + '].isChecked'
        if (i == selected[selected.length - 1]) {
          this.setData({
            [isChecked]: true
          })
        } else {
          this.setData({
            [isChecked]: false
          })
        }
      }
    }
  }

整体思路 - 因为每一次点击都会触发bingchange中的事件，我们可以在此事件中处理，如果选中的数量>1，那么遍历所有的复选框，将刚刚选择的复选框状态设置成true，其他所有复选框状态设置成false，那么就可以保证每次只能有一个被选中

具体代码实现如上，逻辑还是比价简单的

着重强调两个技巧

var isChecked = 'task.questionList[2].optionalAnswers[' + i + '].isChecked' 可以通过加法的形式实现内容结合变量的string化

[isChecked]: true string化需要加上中括号才能正确赋值

效果