最近写小程序的时候，遇到多选框的问题！并不是多选框不好操作，而是小程序的多选框实在太丑了好吗！本来的初衷是想修改一下默认样式就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></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>

下面是我的代码 由于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{ font-size: 24rpx; color: #ff4965;}.list_cons .right .list1 .big{ font-size: 32rpx;}.list_cons .right .lists2{ height: 36rpx; line-height: 36rpx; font-size: 22rpx;}.list_cons .right .lists2 .left{ width: 162rpx; text-align: center; color: #ff4965; border: 1rpx solid #ff4965; box-sizing: border-box; border-radius: 5rpx;}.list_cons .right .lists2 .right2{ color: #999999;}.flex_center{ display: flex; display: -webkit-flex; justify-content: center; align-items: center;}.flex_between{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: center;}.flex_start{ display: flex; display: -webkit-flex; justify-content: flex-start; align-items: center;}.flex_end{ display: flex; display: -webkit-flex; justify-content: flex-end; align-items: center;}

js

js纯手写虽然不太好吧！但是功能实现了，万恶 的checkbox魔鬼
初始化

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', checked: false}, { name: '6', checked: false}, ], }, // 改变类目的名字 change_classname:function(){ let that = this; that.setData({ title_disabled: !that.data.title_disabled, }); // 这里自动获取焦点 }, finish_classname: function () { let that = this; that.setData({ title_disabled: !that.data.title_disabled, }) }, // 管理商品 management:function(){ let that = this; that.setData({ management_good: true, }) }, finish_management:function(){ let that = this; that.setData({ management_good:false, }) }, // 选择 select:function(e){ var that = this; let arr2 = []; if (that.data.management_good == false){ return; }else{ var arr = that.data.items; var index = e.currentTarget.dataset.id; arr[index].checked = !arr[index].checked; console.log(arr); for(let i=0;i<arr.length;i++){ if(arr[i].checked){ arr2.push(arr[i]) } }; that.setData({ items: arr, middlearr:arr2 }) } }, // 删除 deleteitem:function(){ var that = this; let arr = that.data.items; let arr2 = []; console.log(arr); for(let i=0;i<arr.length;i++){ if (arr[i].checked == false){ arr2.push(arr[i]); } } that.setData({ items:arr2, middlearr:[] }) }, // 全选 select_all:function(){ let that = this; that.setData({ select_all: !that.data.select_all }) if (that.data.select_all){ let arr = that.data.items; let arr2 = []; for (let i = 0; i < arr.length; i++) { if (arr[i].checked == true) { arr2.push(arr[i]); }else{ arr[i].checked = true; arr2.push(arr[i]); } } that.setData({ items: arr2, middlearr:arr2 }) } }, // 取消全选 select_none:function(){ let that = this; that.setData({ select_all: !that.data.select_all }) let arr = that.data.items; let arr2 = []; for (let i = 0; i < arr.length; i++) { arr[i].checked = false; arr2.push(arr[i]); } that.setData({ items: arr2, middlearr:[] }) },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。