微信小程序学习笔记(radio标签、checkbox标签)

radio标签需要和radio-group配合使用，类似ul>li的关系，在radio-group中的单选框，同时只会被选中一个。

<radio-group bindchange="handleChange">
  <radio value="male">男</radio>
  <radio value="female">女</radio>
</radio-group>
<view class="" hover-class="none" hover-stop-propagation="false">
  您选择的是：{{gender}}
</view>

Page({
  data: {
    gender:""
  },
  handleChange(e){
    let gender = e.detail.value;
    this.setData({
      gender:gender
    })
  }
})

checkbox标签同样需要和checkbox-group配合使用。没什么细节，直接上代码

<checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
    <view>你选择的是：{{checkedList}}</view>
</checkbox-group> 

Page({
  data: {
    checkedList:"",
    list:[
      {
        id:0,
        name:"🍎",
        value:"🍎"
      },
      {
        id:1,
        name:"🍌",
        value:"🍌"
      },
      {
        id:2,
        name:"🍉",
        value:"🍉"
      }
  ]
  },
  handleItemChange(e){
    const checkedList = e.detail.value;
    this.setData({
      checkedList
    })
  }
})