微信小程序获取复选框全选反选选中的值(实例代码)

 更新时间:2019年12月17日 09:54:23   投稿:mrr  
这篇文章主要介绍了微信小程序获取复选框全选反选选中的值,本文通过实例代码给大家简单介绍,需要的朋友可以参考下

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的数组
  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 //单个选中的值
  })
 },
})

效果图:

总结

以上所述是小编给大家介绍的微信小程序获取复选框全选反选选中的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • javaScript实现滚动条事件详解

    javaScript实现滚动条事件详解

    这篇文章主要为大家详细介绍了javaScript实现滚动条事件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • javascript 判断整数方法分享

    javascript 判断整数方法分享

    本文介绍了使用javascript判断整数的2种方法中的一种正则判断,因为逐字判断效率太低下了,有相同需求的小伙伴们参考下
    2014-12-12
  • javascript使用avalon绑定实现checkbox全选

    javascript使用avalon绑定实现checkbox全选

    checkbox全选应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?
    2015-05-05
  • 手写Spirit防抖函数underscore和节流函数lodash

    手写Spirit防抖函数underscore和节流函数lodash

    这篇文章主要介绍了手写Spirit防抖函数underscore和节流函数lodash,接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数
    2022-03-03
  • extjs简介_动力节点Java学院整理

    extjs简介_动力节点Java学院整理

    这篇文章主要介绍了extjs简介,ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI组件,具有统一的主题,便于快速开发,提高效率
    2017-07-07
  • JavaScript事件委托原理与用法实例分析

    JavaScript事件委托原理与用法实例分析

    这篇文章主要介绍了JavaScript事件委托原理与用法,结合实例形式较为详细的分析了JavaScript事件流以及事件委托相关原理、用法与操作注意事项,需要的朋友可以参考下
    2018-06-06
  • javascript操作referer详细解析

    javascript操作referer详细解析

    本篇文章主要是对javascript操作referer进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 如何在一个页面显示多个百度地图

    如何在一个页面显示多个百度地图

    经常有人问,百度地图JavaScript API能在同一页面显示多个地图吗?当然可以啊,为什么不可以呢?地图之于页面无非就是个div,我们可以在页面显示多个div,自然也可以显示多个地图。
    2013-04-04
  • 如何在JavaScript中实现私有属性的写类方式(一)

    如何在JavaScript中实现私有属性的写类方式(一)

    这篇文章主要介绍了如何在JavaScript中实现私有属性的写类方式。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js返回上一页并刷新代码整理

    js返回上一页并刷新代码整理

    返回上一页并刷新在此功能有利于用户的体验,是每一个web开发人员所必备的一项,长话短说,今天介绍实现此功能的一个方法,需要了解的朋友可以参考下
    2012-12-12

最新评论