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

 更新时间: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 //单个选中的值
  })
 },
})

效果图:

总结

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

相关文章

  • js实现图片无缝滚动特效

    js实现图片无缝滚动特效

    这篇文章主要为大家详细介绍了js实现图片无缝循环滚动特效的相关资料,本实例在网页中较为常见,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 自己编写的支持Ajax验证的JS表单验证插件

    自己编写的支持Ajax验证的JS表单验证插件

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍的这个不错的JavaScript表单验证插件,支持ajax验证,有需要的小伙伴可以参考下
    2015-05-05
  • JavaScript编写开发动态时钟

    JavaScript编写开发动态时钟

    这篇文章主要为大家详细介绍了JavaScript编写开发动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • ES6新特性六:promise对象实例详解

    ES6新特性六:promise对象实例详解

    这篇文章主要介绍了ES6新特性之promise对象,结合实例形式详细分析了promise对象的功能、状态、使用方法与相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript判断textarea值是否为空并给出相应提示

    JavaScript判断textarea值是否为空并给出相应提示

    假如用户没有输入数据则给出相应提示,那么该如何来判断呢?下面以判断textarea值是否为空为例
    2014-09-09
  • js实现视频镜面反转的示例代码

    js实现视频镜面反转的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现视频镜面反转的效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • JSON与JavaScript对象关系及语法规则详解

    JSON与JavaScript对象关系及语法规则详解

    这篇文章主要为大家介绍了JSON与JavaScript对象关系及语法规则详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • JavaScript:ES2019 的新特性(译)

    JavaScript:ES2019 的新特性(译)

    这篇文章主要介绍了JavaScript:ES2019 的新特性(译),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 深入理解JavaScript中Ajax

    深入理解JavaScript中Ajax

    Ajax不是一种新的编程语言,而是使用现有标准的新方法。本文重点给大家介绍javascript中ajax知识,非常不错,感兴趣的朋友参考下
    2016-08-08
  • 基于Web Audio API实现音频可视化效果

    基于Web Audio API实现音频可视化效果

    这篇文章主要介绍了基于Web Audio API实现音频可视化效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论