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

微信小程序獲取復(fù)選框全選反選選中的值(實(shí)例代碼)

 更新時(shí)間:2019年12月17日 09:54:23   投稿:mrr  
這篇文章主要介紹了微信小程序獲取復(fù)選框全選反選選中的值,本文通過實(shí)例代碼給大家簡(jiǎn)單介紹,需要的朋友可以參考下

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)條事件詳解

    javaScript實(shí)現(xiàn)滾動(dòng)條事件詳解

    這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)滾動(dòng)條事件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • javascript 判斷整數(shù)方法分享

    javascript 判斷整數(shù)方法分享

    本文介紹了使用javascript判斷整數(shù)的2種方法中的一種正則判斷,因?yàn)橹鹱峙袛嘈侍拖铝耍邢嗤枨蟮男』锇閭儏⒖枷?/div> 2014-12-12
  • javascript使用avalon綁定實(shí)現(xiàn)checkbox全選

    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

    這篇文章主要介紹了手寫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)介_動(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í)例分析

    JavaScript事件委托原理與用法實(shí)例分析

    這篇文章主要介紹了JavaScript事件委托原理與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript事件流以及事件委托相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下
    2018-06-06
  • javascript操作referer詳細(xì)解析

    javascript操作referer詳細(xì)解析

    本篇文章主要是對(duì)javascript操作referer進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2014-03-03
  • 如何在一個(gè)頁(yè)面顯示多個(gè)百度地圖

    如何在一個(gè)頁(yè)面顯示多個(gè)百度地圖

    經(jīng)常有人問,百度地圖JavaScript API能在同一頁(yè)面顯示多個(gè)地圖嗎?當(dāng)然可以啊,為什么不可以呢?地圖之于頁(yè)面無非就是個(gè)div,我們可以在頁(yè)面顯示多個(gè)div,自然也可以顯示多個(gè)地圖。
    2013-04-04
  • 如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式(一)

    如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式(一)

    這篇文章主要介紹了如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式。需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2013-12-12
  • js返回上一頁(yè)并刷新代碼整理

    js返回上一頁(yè)并刷新代碼整理

    返回上一頁(yè)并刷新在此功能有利于用戶的體驗(yàn),是每一個(gè)web開發(fā)人員所必備的一項(xiàng),長(zhǎng)話短說,今天介紹實(shí)現(xiàn)此功能的一個(gè)方法,需要了解的朋友可以參考下
    2012-12-12

最新評(píng)論