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


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实现的一个导航滚动效果具体代码
May 27 Javascript
将list转换为json失败的原因
Dec 17 Javascript
JavaScript中string对象
Jun 12 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
jQuery实现滚动效果
Nov 17 jQuery
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
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变量范围介绍
2012/10/15 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
学Python 3的理由和必要性
2019/11/19 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python如何将装饰器定义为类
2020/07/30 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
2014年新生军训方案
2014/05/01 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
三严三实学习心得体会
2014/10/13 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
律师函格式范本
2015/05/27 职场文书
建筑工程催款函
2015/06/24 职场文书
《绝招》教学反思
2016/02/20 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers