微信小程序——实现单选、多选

单选使用radio-group标签包裹radio标签

多选使用checkbox-group 标签包裹checkbox标签

 单选和多选的wxml代码

<view class="form-container">
<!-- 实现单选 -->
  <text>请输入你最喜欢的水果</text>
  <radio-group bindchange="">
    <radio value="" />苹果
    <radio value="" />芒果
    <radio value="" />火龙果
  </radio-group>
  <text>请选择你最喜欢的电视剧</text>
  <!-- 实现多选 -->
  <checkbox-group bindchange="">
    <view>
      <checkbox value="" />狂飙
    </view>
    <view>
      <checkbox value="" />奥特曼
    </view>
    <view>
      <checkbox value="" />巴拉拉小魔仙
    </view>
    <view>
      <checkbox value="" />今日说法
    </view>
  </checkbox-group>
</view>

以下是wxss代码

/* pages/form/form.wxss */
.form-container{
  width: 100%;
  padding: 20rpx;
}
radio-group{
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
}
checkbox-group view{
  width: 100%;
  height: 100rpx;
}