微信小程序 单选多选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)
},