**

小程序复选框+优化+单选全选多选删除操作

**

小程序复选框太挫了，肺腑之言

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

先来看看效果图

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

wxml

view class='header1'  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' bindtap='management'          管理        /view        view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'          完成        /view      /view    /view  /view/viewview class='header2'  view class='header'    view class='header_con flex_between'      input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}"      /input      view class='right flex_end'        block wx-if="{{title_disabled}}"          image src='../../../image/hotel/delete.png' bindtap='change_classname'/image        /block        block wx-if="{{!title_disabled}}"          view class='flex_center' bindtap='finish_classname'            完成          /view        /block      /view    /view  /view/viewview class='onlinechoose'  view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'    view class='list_cons flex_start'      view wx:if="{{management_good}}" class='lefts'        block wx-if="{{!i.checked}}"          view class='icon_none'/view        /block        block wx-if="{{i.checked}}"          icon type="success" size="30" color="red" /        /block      /view      image src='../../../image/hotel/demoimg.jpg'/image      view class='right'        view class='name'          {{i.name}}        /view        view class='list1 flex_between'          view class='left'            view class='condition1'              16㎡|双人床|含早            /view            view class='condition2'              block                间数：10              /block              block                间数：2              /block            /view          /view        /view        view class='list1 flex_between'          view class='left'            view class='condition2'              类目一            /view          /view        /view      /view    /view  /view/viewview class='bottom flex_between' wx:if="{{management_good}}"  view class='left flex_start'    block wx:if="{{select_all}}"      view bindtap='select_none' class='flex_start'        icon type="success" size="30" color="red" /        view          取消全选        /view      /view    /block    block wx:if="{{!select_all}}"      view bindtap='select_all' class='flex_start'        view class='select_none'        /view        view          全选        /view      /view    /block  /view  view class='right flex_end'    view style='text-align:right'      view class='all'        共选中{{middlearr.length}}件商品      /view    /view    view bindtap='deleteitem' class='sure'      删除    /view  /view/view

下面是我的代码 由于wxss我是在app.wxss和当前文件都有的没太多的整理全都贴上去了，在这里多说一句小程序是支持弹性布局的，当你命名好几个弹性盒子的类名后，将会发现css将会减少很大的工作量

wxss

.header1{  background-color: #f5f5f5;}.header2{  background-color: #ffffff;}.header {  width: 100%;  height: 80rpx;  border-bottom: 1rpx solid #d6d6d6;}.header .header_con {  width: 700rpx;  height: 80rpx;  margin: 0 auto;  color: #333;  font-size: 30rpx;}.header .header_con image{  width: 44rpx;  height: 44rpx;}.header .header_con .right{  color: #ff4965;}.bottom{  width: 100%;  height: 100rpx;  border-top: 1rpx solid #d6d6d6;  background-color: #fff;  position: fixed;  left: 0rpx;  bottom: 0rpx;}.bottom .left{  margin-left: 25rpx;}.bottom .left .select_none{  width: 60rpx;  height: 60rpx;  border: 1rpx solid #d6d6d6;  border-radius: 50%;}.bottom .right .all{  color: #ff830f;  font-size: 26rpx;}.bottom .right .gray{  color: #666666;  font-size: 22rpx;}.bottom .right .sure{  margin-left: 22rpx;  width: 220rpx;  height: 100rpx;  line-height: 100rpx;  text-align: center;  background-color: #ff4965;  color: #fff;}/*列表*/.onlinechoose{  width: 750rpx;  margin-top: 15rpx;  background-color: #ffffff;  font-size: 32rpx;}.onlinechoose .hotel_list{  width: 750rpx;  height: 260rpx;  border-bottom: 1rpx solid #d6d6d6;  background-color: #ffffff;}.onlinechoose .hotel_list .icon_none{  width: 60rpx;  height: 60rpx;  border: 1rpx solid #d6d6d6;  border-radius: 50%;}.onlinechoose .hotel_list .list_cons{  width: 700rpx;  height: 200rpx;}.onlinechoose .list_cons .lefts{  width: 80rpx;}.onlinechoose .list_cons image{  width: 200rpx;  height: 200rpx;  margin-right: 25rpx;}.list_cons .right{  width: 395rpx;  height: 200rpx;}.list_cons .right .name{  font-size: 32rpx;  color: #333333;  font-weight: 700;  letter-spacing: 3rpx;  margin-bottom: 20rpx;}.list_cons .right .list1{    margin-bottom: 17rpx;}.list_cons .right .list1 .condition1{  font-size: 28rpx;  color: #999999;  margin-bottom: 15rpx;}.list_cons .right .list1 .condition2{  font-size: 24rpx;  color: #999999;}.list_cons .right .list1 .act{  color: #2d8622;}.list_cons .right .list1 .r{  
            

              

                点击这里免费试用，快速创建您的专属小程序
              
              

                标签：
                微信小程序
                小程序
                小程序是什么
              
            
            
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。