小程序实现多选框功能

最近写小程序的时候，遇到多选框的问题！并不是多选框不好操作，而是小程序的多选框实在太丑了好吗！本来的初衷是想修改一下默认样式就好了，从边框宽度到背景却在最后选择出来的额图标上无从下手！没办法自己手写检查的效果采用的是图标图标。感兴趣的可以往下看看！

先来看看效果图

实现的原理也非常的简单，数据渲染到列表，绑定事件修改列表项的检查属性，不建议直接操作数据的数据，当要操作的时候可以定义一个局部变量，局部操作完成后，在赋值给数据，利用数据双向绑定的特性，就完成所有的操作

页面结构

view class=' header 1 ' view class=' header ' view class=' header _ con flex _ between ' view class=' left '共计{{items.length}}件商品/view view class=' right flex _ end ' view wx : if=' { {！management _ good } } ' class=' flex _ center ' bind tap=' management '管理/view view wx : if=' { { management _ good } } ' class=' flex _ center ' bind tap=' finish _ management '完成/view/view/view/view/view class=' header 2 ' view class=' header ' view class=' header _ con flex _ between '输入值='类目一disabled=“{ { title _ disabled } }”焦点='{{!title _ disabled } } '/input view class=' right flex _ end ' block wx-if=' { { title _ disabled } } ' image src='./././图像/酒店/删除。png ' bind tap=' change _ class name '/image/block block wx-if=' { {！title _ disabled } } ' view class=' flex _ center ' bind tap=' finish _ class name '完成/view/block/view/view/view/view class=' online choose ' view class=' hotel _ list flex _ center ' wx : for=' { { items } } ' wx : key=' items ' wx : for-items=' I ' data-id=' { { index } } bind tap=' select ' view class=' list _ cons flex _ start ' view wx : if=' { { management _ good } } ' class=' lefts ' block wx-Xi。 已选中} }“视图类=' icon _ none '/视图/块wx-if=' { { I . checked } }”图标类型=' success ' size=' 30 ' color=' red '/块/视图图像src='./././图像/酒店/分层。jpg/' image view class=' right ' view class=' name ' { I . name } }/view view view class=' list 1 flex _ between ' view class=' left ' view class=' condition 1 ' 16双人床|含早/view view class='condition2 '块间数：10/街区街区间数：2/块/视图/视图/视图视图类='list1 flex_between '视图类='左侧'视图类='条件2 '类目一/view/view/view/view/view/view class=' bottom flex _ between ' wx : if=' { { management _ good } } view class=' left flex _ start ' block wx : if=' { { select _ all } } ' view bind tap=' select _ none ' class=' flex _ start '图标类型=' success ' size=' 30 ' color=' red '/view取消全选/view/view/block block wx : if=' { {！ select _ all } } '视图绑定点击=' select _ all '类=' flex _ start '视图类=' select _ none '/视图视图全选/view/view/block/view view class=' right flex _ end ' view style=' text-align : right ' view class=' all '共选中{{middlearr.length}}件商品/view/view视图绑定tap=' delete item ' class='确定'删除/视图/视图/视图下面是我的代码由于页面样式表我是在app.wxss和当前文件都有的没太多的整理全都贴上去了，在这里多说一句小程序是支持弹性布局的，当你命名好几个弹性盒子的类名后，将会发现钢性铸铁将会减少很大的工作量

页面样式表。标题1 {底色： # f5f 5；} .标题2 {底色： # ffffff}.标题{宽度： 100%；高度： 80 rpx border-底部： 1rpx实心# d6d6d6}。标题header _ con { width : 700 rpxhire : 80 rpxmargin : 0 auto color : # 333 font-size : 30 rpx；}.标题header _ con image { width : 44 rpx；高度： 44rpx}。标题header _ con . right { color : # ff 4965；}.底部{宽度： 100%;高度： 100 rpx边框-top: 1rpx实心# d6d6d6背景-color : # fff；位置：固定；left: 0rpxbottom: 0rpx}。底部。左{左边距： 25 rpx}.底部。向左选择_ none { width : 60 rpxhire : 60 rpxborder : 1px固体# d6d6d6边界半径： 50%;}.底部。没错all { color : # ff 830 ffont-size : 26 rpx；}.底部。没错。灰色{ color : # 66666 font-size : 22 rpx；}.底部。没错。确定{左边距： 22 rpx宽度： 220 rpx高度： 100 rpx线高： 100 rpx文本对齐：中心；背景-颜色： # ff 4965color: # fff}/*列表*/.onlinechoose { width: 750rpx页边距-top : 15 rpx；背景-color : # ffffff；font-size : 32 rpx}.在线选择hotel _ list { width : 750 rpx h8 : 260 rpx border-bottom : 1px实心# d6d6d6背景-color : # ffffff；}.在线选择。酒店列表icon _ none { width : 60 rpxhire : 60 rpxborder : 1px固体# d6d6d6边界半径： 50%;}.在线选择。酒店列表list _ cons { width : 700 rpx h8 : 200 rpx }。在线选择名单.左侧{横向： 80rpx}。在线选择list _ cons image { width : 200 rpx；高度： 200rpx右边距： 25 rpx}.list_cons .右侧{ width : 395 rpx h8 : 200 rpx }。list_cons .没错。名称{ font-size 3: 32 rpxcolor : # 333333 font-weight : 700；字母-间距： 3rpx保证金-底部： 20 rpx}.list_cons .右。列表1 {边距-底部： 17 rpx}.list_cons .没错。清单1。条件1 { font-size : 28 rpx颜色： # 999999保证金-底部： 15 rpx}.list_cons .没错。清单1。条件2 { font-size : 24 rpxcolor: # 999999}。list_cons .好的。列表1。act { color: # 2d8622}。list_cons .好的。列表1。r { font-size : 24 rpxcolor: # ff4965}。list_cons .好的。列表1。big { font-size : 32 rpx}.list_cons .右侧列表{ height: 36rpx线高： 36rpxfont-size : 22 rpx}.list_cons .好的。清单2。左侧{ width: 162rpx文本对齐：中心；color : # ff 4965 border : 1rpx固体# ff4965盒子尺寸：边框盒子；边界半径： 5rpx}.list_cons .右列表2 .右2 { color : # 999999}.flex _ center { display : flex display :-web kit-flex；正义-内容：中心；align-items:居中；}.flex _ between { display : flex display :-web kit-flex；正义-内容：空格；align-items:居中；}.flex _ start { display : flex display :-web kit-flex；正义-内容： flex-start；align-items:居中；}.flex _ end { display : flex display :-web kit-flex；正义-内容：灵活端；align-items:居中；}js

射流研究…纯手写虽然不太好吧！但是功能实现了，万恶的检验盒魔鬼初始化

data: { imgUrl: imgUrl，title _ disabled:true，//控制修改表头名字management_good:false，select_all:false，middlearr:[]，items: [ { name: '1 '，checked: false}，{ name: '2 '，checked: false}，{ name: '3 '，checked: false}，{ name: '4 '，checked: false}，{ name: ' 5 '改变类目的名字change _ class name : function(){ let that=this；那个。setdata({ title _ disabled :that.data.title_disabled，})；//这里自动获取焦点}，finish _ class name : function(){ 0让那个=这个。setdata({ title _ disabled :that.data.title_disabled，}) }，//管理商品management : function(){ 0让那个=这个；那个。setdata({ management _ good : true，}) }，finish _ management : function(){ 0让那=这。setdata({ management _ good : false，}) }，//选择选择：函数(e){ var=this；让arr 2=[]；如果(那个。数据。management _ good==false){ return；} else { var arr=那个。数据。物品；var索引=e . CurrentTarget。数据集。id；逮捕[索引]。选中=!逮捕[索引]。已检查；控制台。日志；用于(设I=0；长度；如果.选中){ arr 2。push(arr[I])} }；that.setData({ items: arr，middlearr:arr2 }) } }，//删除删除项目：函数(){ var=this让arr=the。数据。物品；让arr 2=[]；控制台。日志；用于(设I=0；长度；如果.checked==false){ arr 2。推动；} } that.setData({ items:arr2，middlearr:[] }) }，//全选select_all:function(){ let那=this hat . setdata({ select _ all :那个。数据。选择_ all })如果(即。数据。select _ all){让arr=那个。数据。物品；让arr 2=[]；用于(设I=0；一、长度；如果.选中==true){ arr 2。推动；}else{ arr[i].选中=真；arr 2。推动；} } that.setData({ items: arr2，middlearr:arr2 }) } }，//取消全选select _ none : function(){ 0让它=this hat . setdata({ select _ all :that.data.select_all })让arr=那个。数据。物品；让arr 2=[]；用于(设I=0；一、长度；i ) { arr[i].选中=假；arr 2。推动；} that.setData({ items: arr2，middlearr:[] }) }，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。