怎么在小程序中实现单选多选功能

　　介绍

怎么在小程序中实现单选多选功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强> 1,模拟实现多选框:

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

& lt; ! - wxml祝辞 　　& lt; view 类=& # 39;包# 39;比; 　　,& lt; view 类=& # 39;checkbox-con& # 39;比; 　　,& lt; checkbox-group  bindchange=癱heckboxChange"比; 　　& lt;才能label 类=皗{item.checked ? & # 39; checkbox 检查# 39;:& # 39;复选框# 39;}},,天气:为=皗{checkboxArr}}“, bindtap=& # 39;复选框# 39;,材料指数=皗{指数}},,天气:关键=癷tem.name"比; 　　& lt;才能checkbox 价值=https://www.yisu.com/zixun/{{item.name}}”检查=" {{item.checked}} "/> {{item.name}} 　　标签 　　 　　<按钮类型=俺跫丁眀indtap='确认'>提交> 　　 
/*, wxss  */.wrap {
　　,宽度:550 rpx;
　　,保证金:50 rpx 汽车
　　}
　　,
　　.checkbox-con {
　　,margin-top: 40 rpx;
　　,text-align:中心
　　}
　　.checkbox {
　　,宽度:260 rpx;
　　,身高:72 rpx;
　　,行高:72 rpx;
　　,字体大小:28 rpx;
　　,颜色:# 888888;
　　,边界:1 rpx  solid  # CECECE;
　　,这个特性:5 rpx;
　　,显示:inline-block;
　　,保证金:0,10 rpx  20 rpx  0;
　　,位置:相对的
　　}
　　支票{
　　,颜色:# 1 a92ec;
　　背景:大敌;rgba (49165253, 0.08);
　　,边界:1 rpx  solid  # 31 a5fd;
　　}
　　{.checkbox 复选框
　　,显示:没有
　　}
　　.checked-img {
　　,宽度:28 rpx;
　　,高度:28 rpx;
　　,位置:绝对;
　　,上图:0;
　　,右:0
　　}

js:,

,页({ 　　,数据:{ 　　,checkboxArr: [{ 　　,,名字:& # 39;选项一个# 39;, 　　检查才能:假 　　,},{ 　　,,名字:& # 39;选项b,, 　　检查才能:假 　　,},{ 　　,,名字:& # 39;选项c # 39;, 　　检查才能:假 　　,},{ 　　,,名字:& # 39;选项d # 39;, 　　检查才能:假 　　,},{ 　　,,名字:& # 39;选项e # 39;, 　　检查才能:假 　　,},{ 　　,,名字:& # 39;选项f # 39;, 　　检查才能:假 　　}), 　　}, 　　复选框:大敌;function  (e), { 　　,var  index =, e.currentTarget.dataset.index;//获取当前点击的下标 　　,var  checkboxArr =, this.data.checkboxArr;//选项集合 　　(指数),checkboxArr .checked =, ! checkboxArr(指数)支票;//改变当前选中值的检查 　　,this.setData ({ 　　checkboxArr才能:checkboxArr 　　,}); 　　}, 　　,checkboxChange: function  (e), { 　　,var  checkValue =, e.detail.value; 　　,this.setData ({ 　　checkValue才能:checkValue 　　,}); 　　}, 　　,证实:函数(),{//,提交 　　,console.log (this.data.checkValue)//所有选中的项的值 　　}, 　　})

<强> 2,模拟实现单选框

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

代码也差不多

wxml的话就把check group标签改为单选组合;js那边就在点击时多加个判断

& lt; ! - wxml祝辞 　　& lt; view 类=& # 39;包# 39;比; 　　,& lt; view 类=& # 39;checkbox-con& # 39;比; 　　,& lt; radio-group  bindchange=皉adioChange"比; 　　& lt;才能label 类=皗{item.checked ? & # 39; checkbox 检查# 39;:& # 39;复选框# 39;}},,天气:为=皗{checkboxArr}}“, bindtap=& # 39;射频和# 39;,材料指数=皗{指数}},,天气:关键=癷tem.name"比; 　　& lt;才能checkbox 价值=https://www.yisu.com/zixun/{{item.name}}”检查=" {{item.checked}} "/> {{item.name}} 　　标签 　　 　　<按钮类型=俺跫丁眀indtap='确认'>提交> 　　 
,页({
　　,数据:{
　　,checkboxArr: [{
　　,,名字:& # 39;选项一个# 39;,
　　检查才能:假
　　,},{
　　,,名字:& # 39;选项b,,
　　检查才能:假
　　,},{
　　,,名字:& # 39;选项c # 39;,
　　检查才能:假
　　,},{
　　,,名字:& # 39;选项d # 39;,
　　检查才能:假
　　,},{
　　,,名字:& # 39;选项e # 39;,
　　检查才能:假
　　,},{
　　,,名字:& # 39;选项f # 39;,
　　检查才能:假
　　}),
　　},
　　收音机:大敌;function  (e), {
　　,var  index =, e.currentTarget.dataset.index;//获取当前点击的下标
　　,var  checkboxArr =, this.data.checkboxArr;//选项集合
　　(指数),if  (checkboxArr支票),返回;//如果点击的当前已选中则返回
　　,checkboxArr.forEach (item =祝辞,{
　　item.checked 才能=false
　　,})
　　(指数),checkboxArr .checked =,真的,//改变当前选中值的检查
　　,this.setData ({
　　checkboxArr才能:checkboxArr
　　,});
　　},
　　,radioChange: function  (e), {
　　,var  checkValue =, e.detail.value;
　　,this.setData ({
　　null
　　null
　　null
　　null
　　null
　　null
　　null
怎么在小程序中实现单选多选功能