最近寫小程序的時候，遇到多選框的問題！并不是多選框不好操作，而是小程序的多選框實在太丑了好嗎！本來的初衷是想修改一下默認樣式就OK了，從邊框 寬度 到背景 卻在最后選擇出來的額icon上無從下手！沒辦法自己手寫checked的效果采用的是icon圖標。感興趣的可以往下看看！
為平樂等地區(qū)用戶提供了全套網頁設計制作服務，及平樂網站建設行業(yè)解決方案。主營業(yè)務為成都網站制作、網站設計、外貿網站建設、平樂網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
先來看看效果圖
實現的原理也非常的簡單，數據渲染到列表，綁定事件修改列表項的checked屬性，不建議直接操作data的數據，當要操作的時候可以定義一個局部變量，局部操作完成后，在賦值給data，利用數據雙向綁定的特性，就完成所有的操作
wxml
共計{{items.length}}件商品 管理 完成 完成 {{i.name}} 16㎡|雙人床|含早 間數：10 間數：2 類目一 取消全選 全選 共選中{{middlearr.length}}件商品 刪除
下面是我的代碼 由于wxss我是在app.wxss和當前文件都有的沒太多的整理全都貼上去了，在這里多說一句小程序是支持彈性布局的，當你命名好幾個彈性盒子的類名后，將會發(fā)現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以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
