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

},

相关推荐
笨笨狗吞噬者7 小时前
【uniapp】微信小程序实现自定义 tabBar
前端·微信小程序·uni-app
2501_933907217 小时前
如何选择性价比高的宁波小程序开发服务公司?
科技·微信小程序·小程序
阿珊和她的猫9 小时前
微信小程序 WXSS 与 CSS 的区别
css·微信小程序·notepad++
nhc08811 小时前
贵阳纳海川科技・棋牌室行业数字化解决方案
科技·微信小程序·小程序·软件开发·小程序开发
lizi6612 小时前
uniapp uview-plus 自定义动态验证
前端·vue.js·微信小程序
2501_9159090612 小时前
iOS 抓包不越狱,代理抓包 和 数据线直连抓包两种实现方式
android·ios·小程序·https·uni-app·iphone·webview
CHU72903513 小时前
让知识传递更顺畅:在线教学课堂APP的功能设计
前端·人工智能·小程序
AI前端老薛13 小时前
小程序中简单 Loading 效果关键帧动画
小程序
Greg_Zhong13 小时前
小程序从搭建到开发,涉及基础及必备知识总结
微信小程序
Greg_Zhong13 小时前
小程序中实现左侧分类与右侧子分类的联动效果.....
小程序·左侧分类与右侧分类联动