微信小程序复选框以及全部取消
1.在wxml中先添加复选框和点击事件
<view class="all">
<checkbox class="q" bindtap="checkq" checked="{{isAll}}">全选</checkbox>
</view>
<view class="Box">
<view class="box1" wx:for="{{list}}" bindtap="chlik" data-number="{{index}}">
<checkbox checked="{{item.isCheck}}">{{item.name}}</checkbox>
</view>
</view>
2.在js中添加数据
// pages/xuan/xuan.js
var isAll=false
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
id: "0001",
name: "张三"
},
{
id: "0002",
name: "李四"
},
{
id: "0003",
name: "王五"
}
]
},
checkq:function(){
var list=this.data.list;
console.log(list);
isAll=!isAll;
if(isAll){
for(var i=0;i<list.length;i++){
var item=list[i];
item.isCheck=true
list.splice(i,1,item)
}
}else{
for(var i=0;i<list.length;i++){
var item=list[i];
item.isCheck=false
list.splice(i,1,item)
}
}
this.setData({
list:list
})
},
chlik:function(e){
var index=e.currentTarget.dataset.number;
var list=this.data.list;
var item=list[index];
item.isCheck=!item.isCheck;
list.splice(index,1,item)
this.setData({
list:list
})
var qb=0
var sum=0
for(var i=0;i<list.length;i++){
if(list[i].isCheck){
qb++
sum+=list[i].num
}
}
if(qb===list.length){
isAll=true
}else{
isAll=false
}
this.setData({
isAll:isAll,
sum:sum
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
3.wxss
.Box{
margin-top: 50rpx;
background-color: #d3d3d3;
}
.all{
height: 65rpx;
display: block;
background-color: azure;
border-bottom: 1rpx solid #d3d3d3;
}