微信小程序獲取復(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: "測試1" },
{ code: "2", text: "測試2"},
{ code: "3", text: "測試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ù)選框全選反選選中的值,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
自己編寫的支持Ajax驗(yàn)證的JS表單驗(yàn)證插件
創(chuàng)建一個(gè)JavaScript表單驗(yàn)證插件,可以說是一個(gè)繁瑣的過程,涉及到初期設(shè)計(jì)、開發(fā)與測試等等環(huán)節(jié)。實(shí)際上一個(gè)優(yōu)秀的程序員不僅是技術(shù)高手,也應(yīng)該是善假于外物的。本文介紹的這個(gè)不錯(cuò)的JavaScript表單驗(yàn)證插件,支持ajax驗(yàn)證,有需要的小伙伴可以參考下2015-05-05
JavaScript編寫開發(fā)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫開發(fā)動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
JavaScript判斷textarea值是否為空并給出相應(yīng)提示
假如用戶沒有輸入數(shù)據(jù)則給出相應(yīng)提示,那么該如何來判斷呢?下面以判斷textarea值是否為空為例2014-09-09
js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
JSON與JavaScript對象關(guān)系及語法規(guī)則詳解
這篇文章主要為大家介紹了JSON與JavaScript對象關(guān)系及語法規(guī)則詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
基于Web Audio API實(shí)現(xiàn)音頻可視化效果
這篇文章主要介紹了基于Web Audio API實(shí)現(xiàn)音頻可視化效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06

