2021年6月7日

微信小程序切图 简单实现复选框全选、反选效果


微信小程序切图与网页html5切图其实差不多,很多js逻辑都是可以读懂的,只是写法略有不同,下面是简单实现复选框全选、反选效果,代码非常精简,清测可用。

wxml文件

<view class="tr">
<view class="th">
<checkbox bindtap="selectall" />全选
</view>
<view class="th">id</view>
<view class="th">名称</view>
</view>

<checkbox-group bindchange="checkboxChange">
<view class="tr" wx:for="{{listData}}" wx:key="">
<view class="td">
<checkbox value="{{item.code}}" checked="{{item.checked}}" />
</view>
<view class="td" value="{{item.text}}">{{item.code}}</view>
<view class="td" value="{{item.text}}">{{item.text}}</view>
</view>
</checkbox-group>

 

js文件

Page({
data: {
select_all: false,
listData: [
{ code: "1", text: "测试1" },
{ code: "2", text: "测试2"},
{ code: "3", text: "测试3"}
],
batchIds: '',  //选中的ids
},

//全选与反全选
selectall: function (e) {
console.log(e)
var that = this;
var arr = [];  //存放选中id的数组
for (let i = 0; i < that.data.listData.length; i++) {

that.data.listData[i].checked = (!that.data.select_all)

if (that.data.listData[i].checked == true){
// 全选获取选中的值
arr = arr.concat(that.data.listData[i].code.split(','));
}
}
console.log(arr)
that.setData({
listData: that.data.listData,
select_all: (!that.data.select_all),
batchIds:arr
})
},

// 单选
checkboxChange: function (e) {
console.log(e.detail.value)
this.setData({
batchIds: e.detail.value //单个选中的值
})
},
})



扩展资料 checkbox的样式美化


/*checkbox 整体大小 */
checkbox {
width: 240rpx;
height: 90rpx;
}
/*checkbox 选项框大小 */
checkbox .wx-checkbox-input {
width: 50rpx;
height: 50rpx;
}
/*checkbox选中后样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #FF525C;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 22rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: