微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例
更新時間:2019年05月14日 10:44:44 作者:清風(fēng)思月
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能,結(jié)合實例形式分析了微信小程序多選框功能實現(xiàn)、布局顯示及全選、取消全選相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(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ā)有所幫助。
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實現(xiàn)
鏈表是一種常見的數(shù)據(jù)結(jié)構(gòu)。它是動態(tài)地進(jìn)行存儲分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實現(xiàn),具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03Jvascript學(xué)習(xí)實踐案例(開發(fā)常用)
一些在Jvascript學(xué)習(xí)實踐的實例代碼,需要的朋友可以參考下2012-06-06javascript模擬map輸出與去除重復(fù)項的方法
這篇文章主要介紹了javascript模擬map輸出與去除重復(fù)項的方法,通過自定義函數(shù)結(jié)合遍歷與刪除的方法實現(xiàn)了去除重復(fù)項的功能,非常具有實用價值,需要的朋友可以參考下2015-02-02layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例
這篇文章主要給大家介紹了關(guān)于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關(guān)資料,最近接觸到layer彈窗,感覺彈窗功能異常強大,真的很方便,所以記錄下來,需要的朋友可以參考下2023-12-12js實現(xiàn)在文本框光標(biāo)處添加字符的方法介紹
在開發(fā)應(yīng)用中,經(jīng)常會遇到一些技術(shù)上的問題,比如:怎樣讓js在文本框光標(biāo)處添加字符,本文將以此問題進(jìn)行詳細(xì)介紹,需要了解的朋友可以參考下2012-11-11細(xì)說webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析,然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下2017-12-12