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

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

先来看看效果图

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

wxml

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


 
  
   
   
   
    
     
    
    
     
      完成
     
    
   
  
 


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


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