[微信小程序]单选框以及多选框实例代码附讲解

效果图    微信小程序开发交流群(173683895)

      <radio-group class="radio-group" bindchange="radioChange">        <label class="radio" wx:for="{{k7}}" wx:key="index">          <radio value="{{item.arr_guige02}}" bindtap='radio' data-id="{{item.guige_key02}}" checked="{{item.checked}}"/>{{item.arr_guige02}}        </label>      </radio-group>

 --- > >>  k7的数据

这里我的需求是要用户选择的单选框的value可以它的id , 所有用了两个事件 

radioChange 是单选框选中事件,用于获取选中的单选框的value

radio 是点击事件,用于获取点击的该组件的id

下面是js代码:

// 获取该组件的id  radio:function(e){    this.setData({      guige_key02: e.currentTarget.dataset.id    })    console.log(e.currentTarget.dataset.id)  },  // 发货地址选择,获取用户选择的单选框的值  radioChange: function (e) {    this.setData({      arr_guige02: e.detail.value    })    console.log(e.detail.value)  },

下面的操作也Log出来的GIF图:  这里可以看到,当我选择单选框其中一个的时候,会打印出来它的id和value,是不是很简单?

多选框：

<checkbox-group bindchange="checkboxChange">  <label class="checkbox" wx:for="{{items}}">    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}  </label>  </checkbox-group>

Page({  data: {    items: [      { name: 'm', value: '美国' },      { name: 'z', value: '中国' },      { name: 'b', value: '巴西' },      { name: 'r', value: '日本' },      { name: 'y', value: '英国' },      { name: 'f', value: '法国' },    ],}  bindchanges: function (e) {//方法名不能与属性名相同    this.setData({      index: e.detail.value    })  }, })