微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例
更新時間：2019年05月14日 10:44:44 作者：清風思月
這篇文章主要介紹了微信小程序?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)地進行存儲分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實現(xiàn)，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
一些在Jvascript學習實踐的實例代碼，需要的朋友可以參考下2012-06-06
javascript模擬map輸出與去除重復(fù)項的方法
這篇文章主要介紹了javascript模擬map輸出與去除重復(fù)項的方法,通過自定義函數(shù)結(jié)合遍歷與刪除的方法實現(xiàn)了去除重復(fù)項的功能,非常具有實用價值,需要的朋友可以參考下2015-02-02
不論是網(wǎng)站應(yīng)用還是學習js,大家很注重ie與firefox等瀏覽器的兼容性問題，畢竟這兩中瀏覽器是占了絕大多數(shù)。2009-12-12
layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例
這篇文章主要給大家介紹了關(guān)于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關(guān)資料,最近接觸到layer彈窗,感覺彈窗功能異常強大,真的很方便,所以記錄下來,需要的朋友可以參考下2023-12-12
在開發(fā)應(yīng)用中，經(jīng)常會遇到一些技術(shù)上的問題，比如：怎樣讓js在文本框光標處添加字符，本文將以此問題進行詳細介紹，需要了解的朋友可以參考下2012-11-11
細說webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下2017-12-12
下面小編就為大家?guī)硪黄猨s刪除局部變量的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
用DIV和DIV自身的滾動條相互控制內(nèi)容的滾動，DIV自身的滾動條樣式可以用DIV層覆蓋，重寫滾動條樣式2013-06-06
所謂閉包，值得是詞法表示包括不必要計算的變量的函數(shù)，也就是說，該函數(shù)可以使用函數(shù)外定義的變量。2010-08-08