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


Posted in Javascript onDecember 17, 2019

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 相关文章推荐
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 #Javascript
TypeScript高级用法的知识点汇总
Dec 17 #Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 #Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 #Javascript
JS实现打字游戏
Dec 17 #Javascript
js实现打字小游戏
Dec 17 #Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 #Javascript
You might like
PHP封装的分页类与简单用法示例
2019/02/25 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
打包发布Python模块的方法详解
2016/09/18 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
优秀教师事迹简介
2014/02/02 职场文书
《学会待客》教学反思
2014/02/22 职场文书
敬老月活动总结
2014/08/28 职场文书
女生抽烟检讨书
2014/10/05 职场文书
实习单位鉴定意见
2015/06/04 职场文书
公司酒会致辞
2015/07/30 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle