微信小程序如何获取复选框全选反选选中的值

小编给大家分享一下微信小程序如何获取复选框全选反选选中的值，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联公司是专业的资中网站建设公司，资中接单;提供成都网站建设、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行资中网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

wxml文件

  
   全选
  
   id
   名称



  
    
    
    
    {{item.code}}
    {{item.text}}
  

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

效果图：

以上是“微信小程序如何获取复选框全选反选选中的值”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

文章名称：微信小程序如何获取复选框全选反选选中的值
转载注明：http://6mz.cn/article/gsdjjj.html