最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例

 更新時(shí)間:2019年05月14日 10:44:44   作者:清風(fēng)思月  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能,結(jié)合實(shí)例形式分析了微信小程序多選框功能實(shí)現(xiàn)、布局顯示及全選、取消全選相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?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">運(yùn)號(hào)</view>
<view class="th">V號(hào)</view>
<view class="th">運(yùn)商</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;
}

效果圖:

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

相關(guān)文章

最新評(píng)論

滦南县| 闵行区| 吉木萨尔县| 滨海县| 沙湾县| 开鲁县| 兴山县| 英超| 比如县| 四会市| 巴青县| 吴桥县| 武义县| 思茅市| 定结县| 昌图县| 普陀区| 伊春市| 隆安县| 上高县| 奉新县| 北安市| 酉阳| 定远县| 康马县| 应城市| 赤水市| 木里| 余庆县| 南靖县| 佛学| 台江县| 陇西县| 哈巴河县| 枝江市| 深泽县| 河北省| 宜春市| 昌江| 武城县| 巴彦县|