微信小程序 单选多选radio/checkbox 纯代码分享

 单选按钮

 <radio-group class="radiogroup"  bindchange="radioChange">

  <label class="radio" wx:for="{{items}}">

    <radio value="{{item.name}}" checked="{{item.checked}}" /> {{item.value}}

  </label>

</radio-group>

 

多选按钮

<checkbox-group bindchange="checkboxChange">

  <label class="checkbox" wx:for="{{items}}">

    <checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}

  </label>

</checkbox-group>

+

// pages/test/test.js

Page({

  data: {

    items: [

      {name:"USA", value:"美国"},

      {name:"china", value:"中国", checked: 'true'},

      {name:"baqxi", value:"巴西"},

      {name:"janpan", value:"日本"},

      {name:"france", value:"法国"},

      {name:"grance", value:"德国"},

      {name:"gandi", value:"甘地"}

    ],

    checkboxChange(e) {

      console.log("checkbox发生change事件，携带value值为", e.detail.value)

    },

    radioChange(e) {

      console.log("checkbox发生change事件，携带value值为", e.detail.value)

    },