小程序基于radio、label多行单选

wxml:

<view>
  <block wx:for="{{ form }}" wx:key="id">
    <view class="option">
      <block wx:for="{{ item.options }}" wx:key="id" wx:for-item="option">
        <label for="{{ item.name + option.id }}">
          <text class="{{ option.checked ? 'active' : '' }}">{{ option.value }}</text>
        </label>
      </block>
    </view>

    <radio-group bindchange="onChange" data-name="{{ item.name }}">
      <block wx:for="{{ item.options }}" wx:key="id" wx:for-item="option">
        <radio id="{{ item.name + option.id }}" value="{{ option.value }}"></radio>
      </block>
    </radio-group>
  </block>
</view>

wxss:

.option {
  width: 500rpx;
  display: flex;
  justify-content: space-evenly;
}

.active {
  background-color: red;
}

javascript:

Page({
  data: {
    form: [
      {
        id: 1,
        name: 'option1',
        options: [
          {
            id: 1,
            value: 'JavaScript',
            checked: false
          },
          {
            id: 2,
            value: 'Python',
            checked: false
          },
          {
            id: 3,
            value: 'Java',
            checked: false
          }
        ],
        selected: ''
      },
      {
        id: 2,
        name: 'option2',
        options: [
          {
            id: 1,
            value: 'C/C++',
            checked: false
          },
          {
            id: 2,
            value: 'Go',
            checked: false
          },
          {
            id: 3,
            value: 'Dart',
            checked: false
          }
        ],
        selected: ''
      }
    ]
  },
  onChange(e) {
    let name = e.currentTarget.dataset.name
    let value = e.detail.value
    for (const index in this.data.form) {
      const element = this.data.form[index];
      if (element.name === name) {
        for (const index2 in element.options) {
          const element2 = element.options[index2];
          if (element2.value === value) {
            element2.checked = true
            element.selected = element2.value
          } else {
            element2.checked = false
          }
        }
        break
      }
    }
    console.log(this.data.form)
    this.setData({
      form: this.data.form
    })
  },
  onLoad() {
  }
})