微信小程序 单选多选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 小时前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序
新酱爱学习8 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
2501_9160137410 小时前
iOS 加固工具使用经验与 App 安全交付流程的实战分享
android·ios·小程序·https·uni-app·iphone·webview
军军君0112 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
两个月菜鸟12 小时前
微信小程序进度条cavans
微信小程序·小程序
從南走到北12 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
pearbing13 小时前
持续优化小程序排名,稳定获取搜索流量
小程序
2501_9151063214 小时前
Fiddler 中文版抓包实战 构建标准化调试流程提升团队协作效率
android·ios·小程序·https·uni-app·iphone·webview
mg66815 小时前
微信小程序入门实例_____从零开始 开发一个每天记账的微信小程序
微信小程序·小程序
sanhuamao15 小时前
Taro+nestjs+mongodb实现健身记录微信小程序
微信小程序·taro·nestjs