最近写小程序的时候，遇到多选框的问题！并不是多选框不好操作，而是小程序的多选框实在太丑了好吗！本来的初衷是想修改一下默认样式就OK了，从边框 宽度 到背景 却在最后选择出来的额icon上无从下手！没办法自己手写checked的效果采用的是icon图标。感兴趣的可以往下看看！
为平乐等地区用户提供了全套网页设计制作服务，及平乐网站建设行业解决方案。主营业务为成都网站制作、网站设计、外贸网站建设、平乐网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
先来看看效果图
实现的原理也非常的简单，数据渲染到列表，绑定事件修改列表项的checked属性，不建议直接操作data的数据，当要操作的时候可以定义一个局部变量，局部操作完成后，在赋值给data，利用数据双向绑定的特性，就完成所有的操作
wxml
{{i.name}}
16㎡|双人床|含早
间数：10
间数：2
类目一
取消全选
全选
共选中{{middlearr.length}}件商品
删除
下面是我的代码 由于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以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
本文标题：小程序实现多选框功能
分享URL：
http://cdkjz.cn/article/ihddih.html
