微信小程序實現(xiàn)多選框全選與取消全選功能示例
更新時間:2019年05月14日 10:44:44 作者:清風思月
這篇文章主要介紹了微信小程序實現(xiàn)多選框全選與取消全選功能,結合實例形式分析了微信小程序多選框功能實現(xiàn)、布局顯示及全選、取消全選相關操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序實現(xiàn)多選框全選與取消全選功能。分享給大家供大家參考,具體如下:
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部分:
<view class="scroll"> <scroll-view scroll-x="true"> <checkbox-group class="table" > <view class="tr"> <view class="th"> <checkbox value="all" bindtap="selectall" />全選 </view> <view class="th">運號</view> <view class="th">V號</view> <view class="th">運商</view> <view class="th">返單</view> <view class="th">日期</view> </view> <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 class="td" value="{{item.typ}}">{{item.typ}}</view> <view class="td" value="{{item.typ}}">{{item.typ}}</view> <view class="td" value="{{item.typ}}">{{item.typ}}</view> </view> </checkbox-group> </scroll-view> </view> </view>
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; }
效果圖:
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
JavaScript數(shù)據(jù)結構之鏈表的實現(xiàn)
鏈表是一種常見的數(shù)據(jù)結構。它是動態(tài)地進行存儲分配的一種結構。本文主要介紹JavaScript數(shù)據(jù)結構中鏈表的實現(xiàn),具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例
這篇文章主要給大家介紹了關于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關資料,最近接觸到layer彈窗,感覺彈窗功能異常強大,真的很方便,所以記錄下來,需要的朋友可以參考下2023-12-12細說webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關系進行靜態(tài)分析,然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下2017-12-12