微信小程序实现多选框全选与取消全选功能示例


Posted in Javascript onMay 14, 2019

本文实例讲述了微信小程序实现多选框全选与取消全选功能。分享给大家供大家参考,具体如下:

js部分:

page({
data: { select_all:false,
listData: [{code: "111",text: "text1",typ: "type1",},
{code: "021",text: "text2",typ: "type2",},
{code: "111",text: "text1",typ: "type3",}]}
selectall: function() {//全选与反全选
var that = this;
for (let i = 0; i < that.data.listData.length; i++) {
that.data.listData[i].checked = (!that.data.select_all)}
that.setData({
listData: that.data.listData,
select_all: (!that.data.select_all)
})}
})

wxml部分:

<view class="scroll">
<scroll-view scroll-x="true">
<checkbox-group class="table" >
<view class="tr">
<view class="th">
<checkbox value="all" bindtap="selectall" />全选
</view>
<view class="th">运号</view>
<view class="th">V号</view>
<view class="th">运商</view>
<view class="th">返单</view>
<view class="th">日期</view>
</view>
<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 class="td" value="{{item.typ}}">{{item.typ}}</view>
<view class="td" value="{{item.typ}}">{{item.typ}}</view>
<view class="td" value="{{item.typ}}">{{item.typ}}</view>
</view>
</checkbox-group>
</scroll-view>
</view>
</view>

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;
}

效果图:

微信小程序实现多选框全选与取消全选功能示例

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
js窗口震动小程序分享
Nov 28 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
js中arguments对象的深入理解
May 14 #Javascript
ios中视频的最后一桢问题解决
May 14 #Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 #Javascript
vue项目中引入vue-datepicker插件的详解
May 14 #Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
JavaScript中this的全面解析及常见实例
May 14 #Javascript
jquery 验证用户名是否重复代码实例
May 14 #jQuery
You might like
浅谈PHP语法(1)
2006/10/09 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
use jscript List Installed Software
2007/06/11 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python字符串格式化
2015/06/15 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Django xadmin安装及使用详解
2020/10/26 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
Linux面试题LINUX系统类
2015/11/25 面试题
刑事附带民事起诉状
2015/05/19 职场文书
被告答辩状范文
2015/05/22 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js