微信小程序获取复选框全选,反选选中的值
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小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- JavaScript和微信小程序获取IP地址的方法
最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
随机推荐
- Java学习笔记四:三目运算符与字符串连接符等
一 .三目运算符与自增自减 GitHub代码练习地址:https://github.com/Neo-ML/JavaPractice/blob/master/OperPrac02.java 条件运算符由 ...
- Kali学习笔记6:二层发现
先介绍下ARPING命令: arping命令是用于发送ARP请求到一个相邻主机的工具 arping使用arp数据包,通过PING命令检查设备上的硬件地址.能够测试一个IP地址是否是在网络上已经被使用, ...
- [Postman]创建第一个集合(2)
邮递员收藏是一组可以组织到文件夹中的已保存请求. 您在Postman中发送的每个请求都会显示在侧栏的“ 历史记录”选项卡下.在小规模上,通过历史部分重用请求很方便.但是,随着邮递员使用量的增加,在历史 ...
- LabVIEW(九):程序结构中的分支结构和顺序结构
一.分支结构 1.创建分支结构:程序框图右键>结构>条件结构 2.Ctrl + I 会显示错误列表,双击错误列表会定位到该错误在程序框图中地方. 3.有的分支可以不连接分支内容. 在不连接 ...
- Emmet/Zen Coding 快速入门说明
快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id ...
- sleep( ) 和 wait( ) 的这 5 个区别,你知道几个?
sleep(休眠) 和 wait(等待) 方法是 Java 多线程中常用的两个方法,它们有什么区别及一些该注意的地方有哪些呢?下面给大家一一分解. 区别1:使用限制 使用 sleep 方法可以让让当前 ...
- Mac OS Sierra如何打开任何来源
我们知道在Mac升级到最新的Mac OS Sierra系统之后,随之而来的是第三方应用都无法打开,提示的是无法打开或扔进废纸篓.而在之前的版本系统中,我们知道在系统偏好设置-->安全性与隐私-- ...
- linux overcommit flag
linux中有一个overcomit的配置,这个配置关系到进程在过多申请memory资源的时候,系统的表现(启发式允许,不检查,or 阻止) /proc/sys/vm/overcommit_memor ...
- MaskRCNN-Keypoints
这个月先写一篇吧,后面要复习数学考试了,可能到时候就忘了.今天写一个比较有意思的东西,关于人体的分割与姿态估计.如下图所示: 图片选自mask rcnn的论文,这里由于时间的关系,就不多叙述技术细节了 ...
- linux 命令 — sed
sed stream editor,流编辑器 查找替换 sed 's/pattern/replace_string/' file 替换每一行第一次出现的pattern,将替换后的文本输出到stdout ...