欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?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)

    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學習實踐案例(開發(fā)常用)

    Jvascript學習實踐案例(開發(fā)常用)

    一些在Jvascript學習實踐的實例代碼,需要的朋友可以參考下
    2012-06-06
  • javascript模擬map輸出與去除重復(fù)項的方法

    javascript模擬map輸出與去除重復(fù)項的方法

    這篇文章主要介紹了javascript模擬map輸出與去除重復(fù)項的方法,通過自定義函數(shù)結(jié)合遍歷與刪除的方法實現(xiàn)了去除重復(fù)項的功能,非常具有實用價值,需要的朋友可以參考下
    2015-02-02
  • Javascript 多瀏覽器兼容性問題及解決方案

    Javascript 多瀏覽器兼容性問題及解決方案

    不論是網(wǎng)站應(yīng)用還是學習js,大家很注重ie與firefox等瀏覽器的兼容性問題,畢竟這兩中瀏覽器是占了絕大多數(shù)。
    2009-12-12
  • layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例

    layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例

    這篇文章主要給大家介紹了關(guān)于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關(guān)資料,最近接觸到layer彈窗,感覺彈窗功能異常強大,真的很方便,所以記錄下來,需要的朋友可以參考下
    2023-12-12
  • js實現(xiàn)在文本框光標處添加字符的方法介紹

    js實現(xiàn)在文本框光標處添加字符的方法介紹

    在開發(fā)應(yīng)用中,經(jīng)常會遇到一些技術(shù)上的問題,比如:怎樣讓js在文本框光標處添加字符,本文將以此問題進行詳細介紹,需要了解的朋友可以參考下
    2012-11-11
  • 細說webpack源碼之compile流程-入口函數(shù)run

    細說webpack源碼之compile流程-入口函數(shù)run

    Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析,然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下
    2017-12-12
  • js刪除局部變量的實現(xiàn)方法

    js刪除局部變量的實現(xiàn)方法

    下面小編就為大家?guī)硪黄猨s刪除局部變量的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • JQuery+DIV自定義滾動條樣式的具體實現(xiàn)

    JQuery+DIV自定義滾動條樣式的具體實現(xiàn)

    用DIV和DIV自身的滾動條相互控制內(nèi)容的滾動,DIV自身的滾動條樣式可以用DIV層覆蓋,重寫滾動條樣式
    2013-06-06
  • javascript閉包的理解和實例

    javascript閉包的理解和實例

    所謂閉包,值得是詞法表示包括不必要計算的變量的函數(shù),也就是說,該函數(shù)可以使用函數(shù)外定義的變量。
    2010-08-08

最新評論