微信小程序 单选框 打勾 代码

以下是一个简单的微信小程序单选框示例，当用户勾选选项时，会在控制台输出对应的值：

<view class="radio-group">
  <label class="radio" bindtap="radioChange" data-value="option1">
    <view class="radio__icon"></view>
    <view class="radio__label">选项1</view>
  </label>
  <label class="radio" bindtap="radioChange" data-value="option2">
    <view class="radio__icon"></view>
    <view class="radio__label">选项2</view>
  </label>
  <label class="radio" bindtap="radioChange" data-value="option3">
    <view class="radio__icon"></view>
    <view class="radio__label">选项3</view>
  </label>
</view>

.radio-group {
  display: flex;
  flex-direction: column;
}

.radio {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.radio__icon {
  width: 18px;
  height: 18px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 8px;
}

.radio__label {
  font-size: 16px;
}

.radio__icon.checked {
  background-color: #007aff;
  border-color: #007aff;
}

Page({
  data: {
    selectedValue: ''
  },

  radioChange: function(event) {
    const value = event.currentTarget.dataset.value;
    console.log('选中的值为：', value);
    this.setData({
      selectedValue: value
    });
  }
});

在上面的示例中，我们首先创建了一个包含三个选项的单选框组，每个选项都是一个 `label`，并绑定了 `bindtap` 事件。当用户点击某个选项时，会触发 `radioChange` 函数，该函数会获取选项的值，并将其打印到控制台。我们还定义了一个 `selectedValue` 变量来保存用户选择的值。选项的样式可以根据自己的需求进行修改。