微信小程序獲取復(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-03
extjs簡(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)論

