企业官网建设流程全解析

一、组件简介

在小程序表单开发中，checkbox和radio是两个非常常用的选择组件。checkbox用于多选场景，用户可以同时选中多个选项；radio用于单选场景，用户只能在一组选项中选择一个。

这两个组件通常需要配合checkbox-group和radio-group使用，由外层的group组件来统一管理选中状态和触发change事件。

二、checkbox组件

2.1 基本用法

checkbox组件不能单独使用，必须放在checkbox-group内部。当用户点击某个checkbox时，checkbox-group会触发bindchange事件，回调函数的参数中包含了所有被选中的checkbox的value值数组。

<checkbox-groupbindchange="checkboxChange"><checkboxvalue="reading"/>阅读<checkboxvalue="sports"/>运动<checkboxvalue="music"/>音乐</checkbox-group>

2.2 常用属性

• value：checkbox标识，选中时触发checkbox-group的change事件，会携带value值

• checked：当前是否选中，可用来设置默认选中

• disabled：是否禁用

• color：checkbox的颜色，同css的color

三、radio组件

3.1 基本用法

radio组件同样需要放在radio-group内部。一组radio中同一时间只能有一个被选中，当用户切换选择时，radio-group会触发bindchange事件，回调函数的参数中包含了当前选中的radio的value值。

<radio-groupbindchange="radioChange"><radiovalue="small"/>小号<radiovalue="medium"/>中号<radiovalue="large"/>大号</radio-group>

3.2 常用属性

• value：radio标识。选中时触发radio-group的change事件，会携带value值

• checked：当前是否选中

• disabled：是否禁用

• color：radio的颜色

四、实战项目

下面做一个完整的演示项目，包含checkbox多选和radio单选两个部分。

4.1 index.wxml

<navigation-bartitle="checkbox和radio组件"back="{{false}}"color="black"background="#F8F8F8"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="box"><viewclass="title">checkbox组件</view><checkbox-groupbindchange="checkboxChange"><viewclass="checkbox-item"wx:for="{{hobbies}}"wx:key="value"><checkboxvalue="{{item.value}}"checked="{{item.checked}}"/><textclass="checkbox-text">{{item.name}}</text></view></checkbox-group><viewclass="result">您选择了：{{checkedHobbies}}</view></view><viewclass="box"><viewclass="title">radio组件</view><radio-groupbindchange="radioChange"><viewclass="radio-item"wx:for="{{sizes}}"wx:key="value"><radiovalue="{{item.value}}"checked="{{item.checked}}"/><textclass="radio-text">{{item.name}}</text></view></radio-group><viewclass="demo-text"style="font-size:{{fontSize}};">这是一段演示文字，字号会随选中的radio选项变化。</view></view></scroll-view>

4.2 index.wxss

page{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.js

Page({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){constvalues=e.detail.valueconsthobbies=this.data.hobbies.map(item=>{item.checked=values.indexOf(item.value)!==-1returnitem})constcheckedNames=hobbies.filter(item=>item.checked).map(item=>item.name).join('、')this.setData({hobbies:hobbies,checkedHobbies:checkedNames||'无'})},radioChange(e){constvalue=e.detail.valueconstsizes=this.data.sizes.map(item=>{item.checked=item.value===valuereturnitem})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的字号选项。操作步骤如下：

1. 在data的sizes数组中新增一项：{ name: '30rpx', value: '30rpx', checked: false }
2. 因为使用了wx:for循环渲染，wxml不需要修改，会自动多出一个选项
3. radioChange的逻辑也不需要改，通用的代码会自动处理新选项

这种数据驱动的方式非常灵活——修改数据就能改变界面，不用动结构代码。

当用户选中30rpx时，演示文字的font-size会通过内联style动态绑定为30rpx，实现字号切换效果。

七、注意事项

1. checkbox必须嵌套在checkbox-group中，radio必须嵌套在radio-group中
2. 每个选项都要有唯一的value值，用于标识选项
3. checkbox-group的change事件返回的是数组，radio-group返回的是单个值
4. checked属性可以用来设置默认选中状态
5. 如果需要禁用某个选项，设置disabled="true"即可
6. 使用wx:for渲染选项列表时，建议加上wx:key提高渲染性能

八、总结

checkbox和radio是表单开发中非常基础的组件，分别对应多选和单选场景。掌握它们的用法关键在于理解group组件的作用——外层的checkbox-group和radio-group统一管理选中状态并触发change事件，内层的checkbox和radio只负责展示单个选项。配合数据绑定和wx:for循环，可以很方便地实现动态选项列表。