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

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

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

wxml文件

<view class="tr">
  <view class="th">
   <checkbox bindtap="selectall" />全選
  </view>
   <view class="th">id</view>
   <view class="th">名稱(chēng)</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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效

    js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片無(wú)縫循環(huán)滾動(dòng)特效的相關(guān)資料,本實(shí)例在網(wǎng)頁(yè)中較為常見(jiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 自己編寫(xiě)的支持Ajax驗(yàn)證的JS表單驗(yàn)證插件

    自己編寫(xiě)的支持Ajax驗(yàn)證的JS表單驗(yàn)證插件

    創(chuàng)建一個(gè)JavaScript表單驗(yàn)證插件,可以說(shuō)是一個(gè)繁瑣的過(guò)程,涉及到初期設(shè)計(jì)、開(kāi)發(fā)與測(cè)試等等環(huán)節(jié)。實(shí)際上一個(gè)優(yōu)秀的程序員不僅是技術(shù)高手,也應(yīng)該是善假于外物的。本文介紹的這個(gè)不錯(cuò)的JavaScript表單驗(yàn)證插件,支持ajax驗(yàn)證,有需要的小伙伴可以參考下
    2015-05-05
  • JavaScript編寫(xiě)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘

    JavaScript編寫(xiě)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘

    這篇文章主要為大家詳細(xì)介紹了JavaScript編寫(xiě)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • ES6新特性六:promise對(duì)象實(shí)例詳解

    ES6新特性六:promise對(duì)象實(shí)例詳解

    這篇文章主要介紹了ES6新特性之promise對(duì)象,結(jié)合實(shí)例形式詳細(xì)分析了promise對(duì)象的功能、狀態(tài)、使用方法與相關(guān)操作技巧,需要的朋友可以參考下
    2017-04-04
  • JavaScript判斷textarea值是否為空并給出相應(yīng)提示

    JavaScript判斷textarea值是否為空并給出相應(yīng)提示

    假如用戶(hù)沒(méi)有輸入數(shù)據(jù)則給出相應(yīng)提示,那么該如何來(lái)判斷呢?下面以判斷textarea值是否為空為例
    2014-09-09
  • js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼

    js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-11-11
  • JSON與JavaScript對(duì)象關(guān)系及語(yǔ)法規(guī)則詳解

    JSON與JavaScript對(duì)象關(guān)系及語(yǔ)法規(guī)則詳解

    這篇文章主要為大家介紹了JSON與JavaScript對(duì)象關(guān)系及語(yǔ)法規(guī)則詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • JavaScript:ES2019 的新特性(譯)

    JavaScript:ES2019 的新特性(譯)

    這篇文章主要介紹了JavaScript:ES2019 的新特性(譯),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 深入理解JavaScript中Ajax

    深入理解JavaScript中Ajax

    Ajax不是一種新的編程語(yǔ)言,而是使用現(xiàn)有標(biāo)準(zhǔn)的新方法。本文重點(diǎn)給大家介紹javascript中ajax知識(shí),非常不錯(cuò),感興趣的朋友參考下
    2016-08-08
  • 基于Web Audio API實(shí)現(xiàn)音頻可視化效果

    基于Web Audio API實(shí)現(xiàn)音頻可視化效果

    這篇文章主要介紹了基于Web Audio API實(shí)現(xiàn)音頻可視化效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-06-06

最新評(píng)論

商南县| 沧州市| 织金县| 罗江县| 宣威市| 公安县| 上林县| 牟定县| 大化| 尼勒克县| 阜宁县| 崇阳县| 灌南县| 井冈山市| 离岛区| 尼玛县| 平顺县| 怀宁县| 奉节县| 桂林市| 万州区| 绥棱县| 宁波市| 金溪县| 广灵县| 潼关县| 湘西| 双城市| 进贤县| 永福县| 浏阳市| 会理县| 光泽县| 黄陵县| 鹰潭市| 浮山县| 会同县| 威远县| 马边| 铁岭市| 禄丰县|