一、组件简介在小程序表单开发中checkbox和radio是两个非常常用的选择组件。checkbox用于多选场景用户可以同时选中多个选项radio用于单选场景用户只能在一组选项中选择一个。这两个组件通常需要配合checkbox-group和radio-group使用由外层的group组件来统一管理选中状态和触发change事件。二、checkbox组件2.1 基本用法checkbox组件不能单独使用必须放在checkbox-group内部。当用户点击某个checkbox时checkbox-group会触发bindchange事件回调函数的参数中包含了所有被选中的checkbox的value值数组。checkbox-groupbindchangecheckboxChangecheckboxvaluereading/阅读checkboxvaluesports/运动checkboxvaluemusic/音乐/checkbox-group2.2 常用属性valuecheckbox标识选中时触发checkbox-group的change事件会携带value值checked当前是否选中可用来设置默认选中disabled是否禁用colorcheckbox的颜色同css的color三、radio组件3.1 基本用法radio组件同样需要放在radio-group内部。一组radio中同一时间只能有一个被选中当用户切换选择时radio-group会触发bindchange事件回调函数的参数中包含了当前选中的radio的value值。radio-groupbindchangeradioChangeradiovaluesmall/小号radiovaluemedium/中号radiovaluelarge/大号/radio-group3.2 常用属性valueradio标识。选中时触发radio-group的change事件会携带value值checked当前是否选中disabled是否禁用colorradio的颜色四、实战项目下面做一个完整的演示项目包含checkbox多选和radio单选两个部分。4.1 index.wxmlnavigation-bartitlecheckbox和radio组件back{{false}}colorblackbackground#F8F8F8/navigation-barscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitlecheckbox组件/viewcheckbox-groupbindchangecheckboxChangeviewclasscheckbox-itemwx:for{{hobbies}}wx:keyvaluecheckboxvalue{{item.value}}checked{{item.checked}}/textclasscheckbox-text{{item.name}}/text/view/checkbox-groupviewclassresult您选择了{{checkedHobbies}}/view/viewviewclassboxviewclasstitleradio组件/viewradio-groupbindchangeradioChangeviewclassradio-itemwx:for{{sizes}}wx:keyvalueradiovalue{{item.value}}checked{{item.checked}}/textclassradio-text{{item.name}}/text/view/radio-groupviewclassdemo-textstylefont-size:{{fontSize}};这是一段演示文字字号会随选中的radio选项变化。/view/view/scroll-view4.2 index.wxsspage{height:100%;}.scrollarea{height:calc(100vh - 100rpx);}.checkbox-item{display:flex;align-items:center;padding:20rpx 0;border-bottom:1rpx solid #eee;}.checkbox-text{margin-left:20rpx;font-size:28rpx;color:#333;}.radio-item{display:flex;align-items:center;padding:20rpx 0;border-bottom:1rpx solid #eee;}.radio-text{margin-left:20rpx;font-size:28rpx;color:#333;}.result{margin-top:20rpx;padding:20rpx;background-color:#f5f5f5;border-radius:10rpx;font-size:26rpx;color:#666;}.demo-text{margin-top:30rpx;padding:20rpx;background-color:#f0f8ff;border-radius:10rpx;color:#333;}4.3 index.jsPage({data:{hobbies:[{name:阅读,value:reading,checked:false},{name:运动,value:sports,checked:true},{name:音乐,value:music,checked:false},{name:旅行,value:travel,checked:true}],checkedHobbies:运动、旅行,sizes:[{name:20rpx,value:20rpx,checked:false},{name:24rpx,value:24rpx,checked:true},{name:26rpx,value:26rpx,checked:false},{name:30rpx,value:30rpx,checked:false}],fontSize:24rpx},checkboxChange(e){constvaluese.detail.valueconsthobbiesthis.data.hobbies.map(item{item.checkedvalues.indexOf(item.value)!-1returnitem})constcheckedNameshobbies.filter(itemitem.checked).map(itemitem.name).join(、)this.setData({hobbies:hobbies,checkedHobbies:checkedNames||无})},radioChange(e){constvaluee.detail.valueconstsizesthis.data.sizes.map(item{item.checkeditem.valuevaluereturnitem})this.setData({sizes:sizes,fontSize:value})}})五、代码说明5.1 checkbox多选逻辑checkboxChange事件的回调参数e.detail.value是一个数组包含了所有被选中的checkbox的value值。我们遍历hobbies数组根据value是否在数组中来更新每个选项的checked状态然后把所有选中项的名称拼接成字符串显示出来。5.2 radio单选逻辑radioChange事件的回调参数e.detail.value是当前选中的radio的value值单个值不是数组。我们遍历sizes数组把匹配的那个选项设为选中其他设为未选中同时更新fontSize来改变演示文字的大小。六、扩展实践增加30rpx选项在此基础上增加一个30rpx的字号选项。操作步骤如下在data的sizes数组中新增一项{ name: 30rpx, value: 30rpx, checked: false }因为使用了wx:for循环渲染wxml不需要修改会自动多出一个选项radioChange的逻辑也不需要改通用的代码会自动处理新选项这种数据驱动的方式非常灵活——修改数据就能改变界面不用动结构代码。当用户选中30rpx时演示文字的font-size会通过内联style动态绑定为30rpx实现字号切换效果。七、注意事项checkbox必须嵌套在checkbox-group中radio必须嵌套在radio-group中每个选项都要有唯一的value值用于标识选项checkbox-group的change事件返回的是数组radio-group返回的是单个值checked属性可以用来设置默认选中状态如果需要禁用某个选项设置disabledtrue即可使用wx:for渲染选项列表时建议加上wx:key提高渲染性能八、总结checkbox和radio是表单开发中非常基础的组件分别对应多选和单选场景。掌握它们的用法关键在于理解group组件的作用——外层的checkbox-group和radio-group统一管理选中状态并触发change事件内层的checkbox和radio只负责展示单个选项。配合数据绑定和wx:for循环可以很方便地实现动态选项列表。