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

},

相关推荐
2501_9160074723 分钟前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909063 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
simon_93494 小时前
微信小程序(H5)上传文件到阿里云 OSS(使用 STS 临时凭证)
阿里云·微信小程序·小程序·html5
2501_915918414 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
老师可可6 小时前
成绩查询系统如何制作?
经验分享·学习·小程序·excel·学习方法
2501_915921436 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918416 小时前
iOS 26 应用管理实战 多工具协同构建开发与调试的高效体系
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
游戏开发爱好者88 小时前
iOS 抓包工具实战 开发者的工具矩阵与真机排查流程
android·ios·小程序·https·uni-app·iphone·webview
TiAmo zhang12 小时前
微信小程序开发案例 | 通讯录小程序(下)
小程序·notepad++