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

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

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

先来看看效果图

实现的原理也非常的简单，数据渲染到列表，绑定事件修改列表项的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>
</view>
<view 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>
</view>
<view 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>
</view>
<view 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>

网页名称：小程序实现多选框功能-创新互联
网站链接：https://www.cdcxhl.com/article40/dgjeeo.html

成都网站建设公司_创新互联，为您提供标签优化、面包屑导航、移动网站建设、定制开发、品牌网站建设、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联