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


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 相关文章推荐
JavaScript 常用函数库详解
Oct 21 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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读取xml实例代码
2010/01/28 PHP
php正则表达式(regar expression)
2011/09/10 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
javascript 函数使用说明
2010/04/07 Javascript
javascript动态加载三
2012/08/22 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
python爬虫之urllib3的使用示例
2018/07/09 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python 字符串追加实例
2019/07/20 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
解析python实现Lasso回归
2019/09/11 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
大学社团活动策划书
2014/01/26 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
小学元宵节活动总结
2015/02/06 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
在Docker容器中部署SQL Server
2022/04/11 Servers