在微信小程序开发中，表单组件是非常基础且高频使用的部分。本文将通过一个完整的实战案例，带大家掌握checkbox（复选框）和radio（单选框）组件的用法，并实现通过它们动态控制文本样式的效果。
一、案例效果预览
我们要实现的功能是：页面上方展示一段文字（《满江红·写怀》），下方提供两组控制组件：
三个 checkbox：分别控制文字是否加粗、是否倾斜、是否加下划线
四个 radio：分别控制文字字号为
30rpx、40rpx、50rpx、60rpx
当用户勾选或切换选项时，文字样式会实时变化。
二、核心知识点
在动手之前，先了解几个关键点：
checkbox-group与radio-group单独的
checkbox或radio不会触发change事件，必须包裹在对应的group组件中才能生效。checkbox-group的change事件返回的是一个数组（所有被选中项的值）。radio-group的change事件返回的是一个单值（当前选中项的值）。
动态样式绑定
小程序中可以通过style="{{变量}}"的方式动态绑定样式，配合setData实现实时更新。
三、项目结构
text
复制
下载
├── app.json ├── app.wxss └── pages └── index ├── index.wxml ├── index.wxss └── index.js
四、代码实现
1. app.json 配置
如果你使用的是较新的开发者工具，默认可能开启了skyline渲染引擎。由于skyline对部分 CSS 属性（如text-indent）支持不完善，建议在app.json中移除renderer: "skyline"配置，使用默认的webview引擎：
json
复制
下载
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "sitemapLocation": "sitemap.json" }2. app.wxss 全局样式
css
复制
下载
/**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. index.wxml 页面结构
关键点在于style属性使用了数据绑定，让文字样式随变量变化：
html
复制
下载
运行
<!--index.wxml--> <navigation-bar title="checkbox 和 radio 组件" back="false" color="black" background="#fff"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">满江红·写怀</view> <!-- 动态绑定样式：加粗、倾斜、下划线、字号 --> <view class="txt" style="font-weight: {{myBold}}; font-style: {{myItalic}}; text-decoration: {{myUnderline}}; font-size: {{myFontSize}};"> <view> 怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土、八千里路云和月。莫等闲、白了少年头，空悲切。 </view> <view> 靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。 </view> </view> <view class="other"> <!-- checkbox 组：控制字体样式 --> <checkbox-group bindchange="checkboxChange"> <checkbox value="isBold">加粗</checkbox> <checkbox value="isItalic">倾斜</checkbox> <checkbox value="isUnderline">下划线</checkbox> </checkbox-group> <!-- radio 组：控制字体大小 --> <radio-group bindchange="radioChange"> <radio value="30rpx" checked="true">30rpx</radio> <radio value="40rpx">40rpx</radio> <radio value="50rpx">50rpx</radio> <radio value="60rpx">60rpx</radio> </radio-group> </view> </view> </scroll-view>4. index.wxss 页面样式
css
复制
下载
/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio, checkbox { margin: 20px; } .txt { text-align: justify; text-indent: 2em; margin: 60px 0; } .other { text-align: center; margin: 60px 0; }5. index.js 逻辑处理
这是整个案例的核心，需要处理两个change事件：
javascript
复制
下载
// index.js Page({ data: { myFontSize: '30rpx', // 默认字号 myBold: '', myItalic: '', myUnderline: '' }, /** * checkbox-group 事件处理 * e.detail.value 是一个数组，包含所有被选中项的 value */ checkboxChange(e) { console.log(e); let selected = []; let myBold = ''; let myItalic = ''; let myUnderline = ''; // 获取所有选中项 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: myBold, myItalic: myItalic, myUnderline: myUnderline }); }, /** * radio-group 事件处理 * e.detail.value 是当前选中项的值 */ radioChange(e) { console.log(e); this.setData({ myFontSize: e.detail.value }); } });五、常见问题与避坑指南
为什么点击 checkbox 没反应？
检查是否把checkbox放在了checkbox-group里面，并且绑定了bindchange事件。单独使用checkbox是无法触发change事件的。文字缩进
text-indent不生效？
如果app.json中配置了"renderer": "skyline"，部分 CSS 属性会不兼容。建议删掉该配置，改用默认的webview渲染。如何设置默认选中项？
checkbox：在组件上添加checked="true"。radio：在需要默认选中的那个radio上添加checked="true"，同时data中的初始值要与它的value一致。
console.log(e)能看到什么？checkbox-group：e.detail.value是数组，如["isBold", "isItalic"]。radio-group：e.detail.value是字符串，如"40rpx"。
六、总结
通过这个案例，我们掌握了：
checkbox-group和radio-group的基本用法及事件处理通过
e.detail.value获取用户选择结果利用
setData配合动态style绑定实现样式的实时更新
这类“表单控制视图”的模式在小程序中非常常见，比如设置页面的主题切换、字体调节、权限开关等场景都可以套用这个思路。掌握它，你就迈出了小程序交互开发的重要一步。、
