微信小程序?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ù)返回值,包括基本返回值、多返回值、異步函數(shù)的返回值等,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
關(guān)于uniapp微信小程序左上角返回按鈕的監(jiān)聽詳解
uniapp是一個支持多端的技術(shù),因此它是兼容性比較強(qiáng)的,而且速度也很快,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽的相關(guān)資料,需要的朋友可以參考下2022-04-04
主要是通過判斷指定位數(shù)的數(shù)字，來判斷并加以算法實現(xiàn)男女性別的判斷。2009-11-11
JS生成不重復(fù)的隨機(jī)數(shù)組的簡單實例
下面小編就為大家?guī)硪黄狫S生成不重復(fù)的隨機(jī)數(shù)組的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了js函數(shù)柯里化的方法和作用,結(jié)合實例形式分析了js函數(shù)柯里化的方法、功能及操作注意事項,需要的朋友可以參考下2020-04-04
js實現(xiàn)鼠標(biāo)拖動圖片并兼容IE/FF火狐/谷歌等主流瀏覽器
js實現(xiàn)鼠標(biāo)拖動圖片做了兼容IE，F(xiàn)F火狐，谷歌等主流瀏覽器，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-06-06
JavaScript Date對象詳解及時間戳和時間的相互轉(zhuǎn)換問題
這篇文章主要介紹了JavaScript Date對象詳解及時間戳和時間的相互轉(zhuǎn)換問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
使用Performance Observer實現(xiàn)網(wǎng)頁性能優(yōu)化的示例詳解
在當(dāng)今的網(wǎng)頁開發(fā)中,性能監(jiān)控已經(jīng)成為確保用戶體驗的一個關(guān)鍵部分,本文將深入探討一個強(qiáng)大的性能監(jiān)控工具PerformanceObserver,看看如何使用它提升網(wǎng)站性能吧2025-03-03
javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法
這篇文章主要介紹了javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法,實例分析了javascript操作div層的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
bootstrap實現(xiàn)點擊刪除按鈕彈出確認(rèn)框的實例代碼
本文通過實例代碼給大家介紹了bootstrap實現(xiàn)點擊刪除按鈕彈出確認(rèn)框的方法，需要的朋友參考下吧2018-08-08