小程序实现单选多选功能

小程序的单选组件收音机和多选组件检验盒的样式只提供更改颜色，这对实际项目中的需求显然是不够的，所以自己模拟实现一个。

踩坑点：小程序不支持操作数字正射影像图

1、模拟实现多选框：

实现思路：思路非常简单，给每个选项绑定检查属性，类型为布尔值，点击取反即可

！-wxml-view class=' wrap ' view class=' checkbox-con ' checkbox-group bind change=' checkbox change ' label class=' { { item。检查过了吗？复选框选中":"复选框" } } " wx : for={ { CheckBoxArr } } " bind tap=" checkbox "数据-索引="{ { index } }"wx : key="item。名称"复选框值="{ { item。名称} } "选中="{ { item。选中} }"/{ { item。名称} }/标签/复选框-组按钮类型=“主要”绑定点击=“确认”提交/button /view/view/* wxss */.包装{ width : 550 rpxmargin : 50 rpx auto } .checkbox-con { margin-top : 40 rpx；文本-对齐：中心}。复选框{ width : 260 rpx h8 : 72 rpx线高： 72 rpxfont-size : 28 rpxcolor : # 888888 border : 1rpx实心# CeceBorder-radius : 5rpx；显示器：内联块；余量： 0 10rpx 20rpx 0相对位置： }。已检查{ color : # 1A 92 EC；背景： rgba(49，165，253，0.08)；border: 1rpx固体# 31A5FD}。复选框复选框{ display: none} .checked-img { width : 28 rpx；高度： 28rpx绝对位置：top : 0；right: 0}js:

页面({ data : { checkbox arr : [{ name : })选项' a '，已检查： false }，{ name: '选项' b '，已检查： false }，{ name: '选项' c '，已检查： false }，{ name: '选项d '，已检查： false }，{ name: '选项' e '，已检查： false }，{ name: '选项f '，checked: false }]，}，checkbox:函数{ var index=e . currenttarget。数据集。指数；//获取当前点击的下标var复选框arr=这个。数据。复选框arr//选项集合复选框arr[索引]。选中=!复选框arr[索引]。已检查；//改变当前选中的检查值这个。setdata({ checkbox arr : checkbox arr })；}，checkboxChange:函数{ var CheckValue=e . detail。价值；这个。setdata({检查值：检查值})；}，确认：函数(){//提交控制台。日志(这个。数据。CheckVaLue)//所有选中的项的value }，})2、模拟实现单选框

思路：这个和多选差不多，区别就是需要在点击时清空其他项的选中状态，然后再把当前项设置为选中状态

代码也差不多

页面结构的话就把检验组标签改为无线电小组；射流研究…那边就在点击时多加个判断

！-wxml-view class=' wrap ' view class=' checkbox-con ' radio-group bind change=' radio change ' label class=' { { item。检查过了吗？复选框选中":"复选框" } } " wx : for={ { CheckBoxArr } } " bind tap=" radio "数据-索引="{ { index } }"wx : key="item。名称"复选框值="{ { item。名称} } "选中="{ { item。选中} }"/{ { item。名称} }/标签/无线电组按钮类型=“主要”绑定点击=“确认”提交/按钮/视图/视图

页面({ data : { checkbox arr : [{ name : })选项' a '，已检查： false }，{ name: '选项' b '，已检查： false }，{ name: '选项' c '，已检查： false }，{ name: '选项d '，已检查： false }，{ name: '选项' e '，已检查： false }，{ name: '选项f '，checked: false }]，}，radio:函数{ var index=e . CurrentTarget。数据集。指数；//获取当前点击的下标var复选框arr=这个。数据。复选框arr//选项集合if (checkboxArr[index]).选中)返回；//如果点击的当前已选中则返回复选框排列。foreach(item={ item。checked=false })复选框arr[index].选中=真；//改变当前选中的检查值这个。setdata({ checkbox arr : checkbox arr })；}，radioChange:函数(e){ var检查值=e . detail。价值；这个。setdata({检查值：检查值})；}，确认：函数(){//提交控制台。日志(这个。数据。CheckVaLue)//所有选中的项的值},})最后上个效果截图

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。