选择框

radio-单选框

radio标签 必须要和 父元素radio-group来使用
value： 选中的单选框的值
color： 修改颜色
demo.js 文件代码

Page({
   data: {
     sex:""
  },
  handleChange(e){
    console.log(e);
    //获取单选框中的值
    let a=e.detail.value;
    //把值赋值给 data 中的数据
    this.setData({
      sex:a
    })
  }
 })

demo.wxml 文件代码

<radio-group bindchange="handleChange">
   <radio color="red" value="man">男</radio><radio color="red" value="woman">女</radio>
 </radio-group>
 <view>你选择了：{{sex}}</view>

显示效果：

checkbox-复选框

跟单选框类似
demo.js 文件代码：

Page({
   data: {
     list:[
    {
      id:0,
      name:"apple",
      value:"苹果"
    },
    {
      id:1,
      name:"oranges",
      value:"橙子"
    },
    {
      id:2,
      name:"bananer",
      value:"香蕉"
    }
  ],
  selectlist:[]
  },
  //复选框的选中事件
  getValue(e){
    console.log(e);
    //获取被选中的复选框的值
    const list =e.detail.value;
    //进行赋值
    this.setData({
      selectlist:list
    })

  }
 })

demo.wxml 文件代码：

 <view>
   <checkbox-group bindchange="getValue">
     <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
       {{item.name}}
     </checkbox>
   </checkbox-group>
 </view>
 <view>
   选中：{{selectlist}}
 </view>

显示效果：

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html