微信小程序獲取復(fù)選框全選反選選中的值(實(shí)例代碼)
wxml文件
<view class="tr"> <view class="th"> <checkbox bindtap="selectall" />全選 </view> <view class="th">id</view> <view class="th">名稱</view> </view> <checkbox-group bindchange="checkboxChange"> <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> </checkbox-group>
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; }
js文件
Page({ data: { select_all: false, listData: [ { code: "1", text: "測(cè)試1" }, { code: "2", text: "測(cè)試2"}, { code: "3", text: "測(cè)試3"} ], batchIds: '', //選中的ids }, //全選與反全選 selectall: function (e) { console.log(e) var that = this; var arr = []; //存放選中id的數(shù)組 for (let i = 0; i < that.data.listData.length; i++) { that.data.listData[i].checked = (!that.data.select_all) if (that.data.listData[i].checked == true){ // 全選獲取選中的值 arr = arr.concat(that.data.listData[i].code.split(',')); } } console.log(arr) that.setData({ listData: that.data.listData, select_all: (!that.data.select_all), batchIds:arr }) }, // 單選 checkboxChange: function (e) { console.log(e.detail.value) this.setData({ batchIds: e.detail.value //單個(gè)選中的值 }) }, })
效果圖:
總結(jié)
以上所述是小編給大家介紹的微信小程序獲取復(fù)選框全選反選選中的值,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
javaScript實(shí)現(xiàn)滾動(dòng)條事件詳解
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)滾動(dòng)條事件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09- 本文介紹了使用javascript判斷整數(shù)的2種方法中的一種正則判斷,因?yàn)橹鹱峙袛嘈侍拖铝耍邢嗤枨蟮男』锇閭儏⒖枷?/div> 2014-12-12
javascript使用avalon綁定實(shí)現(xiàn)checkbox全選
checkbox全選應(yīng)該是一個(gè)比較實(shí)用的前端技巧吧,很多時(shí)候我們都需要點(diǎn)擊一個(gè)checkbox,然后將所有的復(fù)選框自動(dòng)全部選中,一些CMS系統(tǒng)的后臺(tái)中,使用本JS效果后,會(huì)大大增強(qiáng)了操作體驗(yàn),那么究竟是如何實(shí)現(xiàn)這一功能的呢?2015-05-05手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱憣?shí)現(xiàn)這兩個(gè)函數(shù)2022-03-03extjs簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了extjs簡(jiǎn)介,ExtJS為開發(fā)者在開發(fā)富客戶的B/S應(yīng)用中提供豐富的UI組件,具有統(tǒng)一的主題,便于快速開發(fā),提高效率2017-07-07如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式(一)
這篇文章主要介紹了如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12最新評(píng)論