小程序实现多选框功能-创新互联

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

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都湿喷机小微创业公司专业提供企业网站建设营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

先来看看效果图

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

wxml

 
  
   
    共计{{items.length}}件商品
   
   
    
     管理
    
    
     完成
    
   
  
 


 
  
   
   
   
    
     
    
    
     
      完成
     
    
   
  
 


 
  
   
    
     
    
    
     
    
   
   
   
    
     {{i.name}}
    
    
     
      
       16㎡|双人床|含早
      
      
       
        间数：10
       
       
        间数：2
       
      
     
    
    
     
      
       类目一
      
     
    
   
  
 


 
  
   
    
    
     取消全选
    
   
  
  
   
    
    
    
     全选
    
   
  
 
 
  
   
    共选中{{middlearr.length}}件商品
   
  
  
   删除
  
 

文章标题：小程序实现多选框功能-创新互联
分享链接：http://jkwzsj.com/article/dgjeeo.html