微信小程序实验：checkbox和radio组件

在微信小程序开发中checkbox多选框、radio单选框是非常常用表单组件必须配合checkbox‑group、radio‑group分组容器使用才能正常监听变化事件。本文通过《满江红》动态文本样式编辑器案例讲解多选、单选组件事件机制、行内动态样式绑定实现字体加粗、斜体、下划线、字体大小实时切换最后完成作业扩展新增 30rpx 字号选项。开发环境微信开发者工具不使用云服务、不使用模板关闭 skyline 渲染引擎。关键词微信小程序checkbox‑groupradio‑group动态样式表单组件一、案例需求实现诗词文本样式编辑器页面展示《满江红・写怀》诗词标题红色居中。多选功能checkbox提供加粗、倾斜、下划线三个复选框可以任意多选勾选后诗词文本实时生效对应样式。单选功能radio提供字体大小选项只能选择一个切换选项立刻修改文字字号作业扩展新增30rpx字号。文本段落需要首行缩进text‑indent:2em⚠️skyline渲染引擎不支持该样式需要在app.json删除renderer:skyline配置。二、核心知识点1. checkbox‑group checkbox多选checkbox必须放到checkbox‑group标签内绑定bindchange事件单独 checkbox 无法触发 change 回调。事件回调e.detail.value返回数组数组里面存放所有勾选的 checkbox 的value属性。可以同时勾选多个选项。2. radio‑group radio单选radio必须放到radio‑group标签内绑定bindchange事件。事件回调e.detail.value返回单个字符串代表当前选中 radio 的value。同一分组内只能选中一项checkedtrue设置页面默认选中项。3. 小程序动态行内样式stylefont-weight:{{myBold}};font-style:{{myItalic}}小程序不能直接操作 DOM 元素通过{{}}数据绑定js 使用setData修改 data 变量页面样式自动更新。注意行内样式多个属性使用分号;隔开。三、完整项目代码3.1 app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview }3.2 pages/index/index.wxml 页面结构!--index.wxml-- navigation-bar titlecheckbox 和 radio 组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle满江红·写怀/view !--动态绑定字体样式加粗、斜体、下划线、字号-- view classtxt stylefont-weight:{{myBold}};font-style:{{myItalic}};text-decoration:{{myUnderline}};font-size:{{myFontSize}}; view 怒发冲冠凭栏处、潇潇雨歇。抬望眼、仰天长啸壮怀激烈。三十功名尘与土八千里路云和月。莫等闲、白了少年头空悲切。 /view view 靖康耻犹未雪。臣子恨何时灭。驾长车踏破贺兰山缺。壮志饥餐胡虏肉笑谈渴饮匈奴血。待从头、收拾旧山河朝天阙。 /view /view view classother !--多选框组checkbox‑group绑定change事件-- checkbox-group bindchangecheckboxChange checkbox valueisBold加粗 /checkbox checkbox valueisItalic倾斜/checkbox checkbox valueisUnderline下划线 /checkbox /checkbox-group !--单选框组radio‑group作业新增30rpx选项-- radio-group bindchangeradioChange radio value30rpx30rpx/radio radio value40rpx40rpx/radio radio value50rpx checkedtrue50rpx/radio radio value60rpx60rpx/radio /radio-group /view /view /scroll-view3.3 app.wxss 全局公共样式/**app.wxss**/ .box { /* 设置外边距 */ margin: 20rpx; /* 设置内边距 */ padding: 20rpx; /* 设置边框 */ border: 2rpx solid silver; } .title { /* 设置字体大小 */ font-size: 40rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置居中对齐 */ text-align: center; /* 设置下外边距 */ margin-bottom: 30rpx; /* 设置字体颜色 */ color: red; }3.4 pages/index/index.wxss 页面局部样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio, checkbox { margin: 20rpx; } .txt { /* 设置文本两端对齐 */ text-align: justify; text-indent: 2em; margin: 60rpx 0; } .other { text-align: center; margin: 60rpx 0; }3.5 pages/index/index.js 业务逻辑// index.js Page({ data: { myFontSize: 50rpx, myBold: , myItalic: , myUnderline: }, /** * checkbox‑group组件事件函数 */ checkboxChange(e) { console.log(e); // 定义存放checkbox‑group所有选中项数组 let selected [] let myBold let myItalic let myUnderline // 获取checkbox‑group中的所有选中项数组 selected e.detail.value // 循环遍历所有选中项 for (let index 0; index selected.length; index) { const element selected[index]; if (element isBold) { myBold bold } if (element isItalic) { myItalic italic } if (element isUnderline) { myUnderline underline } } // 更新数据驱动视图 this.setData({ myBold, myItalic, myUnderline }) }, /** * radio‑group组件事件函数 */ radioChange(e) { console.log(e); this.setData({ myFontSize: e.detail.value }) } })四、程序运行流程页面初始化myFontSize50rpx默认选中 50rpx加粗、斜体、下划线全部为空文本原始样式展示。用户勾选 / 取消多选框触发checkboxChange事件。e.detail.value拿到全部勾选项组成的数组循环数组判断勾选哪些选项给样式变量赋值没有勾选则变量为空字符串样式不生效。setData更新 data 数据页面行内 style 绑定变量自动刷新文本样式。用户切换 radio 单选按钮触发radioChangee.detail.value直接拿到字号字符串赋值给myFontSize字体大小立刻改变。作业扩展30rpx选项只需要增加一条 radio 标签js 代码无需修改复用原有radioChange逻辑。五、踩坑记录❌直接单独使用 checkbox/radio不包裹在 group 组件bindchange 事件不会触发拿不到选中值。❌app.json 保留renderer:skylinetext‑indent首行缩进样式失效排版错乱。❌混淆 checkbox 与 radio 返回值checkbox 返回数组radio 返回单个字符串。❌行内 style 多个 css 属性忘记加分号样式解析失效。❌没有选中任何 checkbox 时e.detail.value是空数组循环不会执行样式变量保持空字符串文本恢复原始样式。六、总结checkbox、radio 组件不能脱离checkbox‑group、radio‑group分组容器使用分组容器负责监听组内选项变化。多选返回数组单选返回字符串这是两个组件最核心区别。小程序动态样式依靠数据绑定 setData 实现不要尝试 DOM 操作。新增 radio 选项时只需要新增 radio 标签value 设置对应字号原有 js 逻辑完全复用扩展性好。