微信小程序实现多选框全选与取消全选功能示例
本文实例讲述了微信小程序实现多选框全选与取消全选功能。分享给大家供大家参考,具体如下:
创新互联从2013年开始,是专业互联网技术服务公司,拥有项目网站设计、网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元邓州做网站,已为上家服务,为邓州各地企业和个人服务,联系电话:13518219792
js部分:
page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "111",text: "text1",typ: "type3",}]} selectall: function() {//全选与反全选 var that = this; for (let i = 0; i < that.data.listData.length; i++) { that.data.listData[i].checked = (!that.data.select_all)} that.setData({ listData: that.data.listData, select_all: (!that.data.select_all) })} })
wxml部分:
全选 运号 V号 运商 返单 日期 {{item.code}} {{item.text}} {{item.typ}} {{item.typ}} {{item.typ}}
wxss部分:
.table{ background-color: #fff; border:1px solid #dadada; width:1200rpx; margin-left:0rpx; } .tr{ background-color: #dadada; white-space: nowrap; width:100%; display: flex; text-align: center; justify-content: center; } .th{ background-color: #fff999; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; } .td{ background-color: #fff; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; }
效果图:
希望本文所述对大家微信小程序开发有所帮助。
网站栏目:微信小程序实现多选框全选与取消全选功能示例
分享网址:http://lswzjz.com/article/pedgch.html