小程序实现多选框功能

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