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


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 面向对象之重载
May 04 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
使用Vant完成Dialog弹框案例
Nov 11 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编码转换
2012/11/05 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
网页常用特效代码整理
2006/06/23 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
js 幻灯片的实现
2011/12/06 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
ES6 十大特性简介
2020/12/09 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python利用lxml读写xml格式的文件
2017/08/10 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
详解Python设计模式之策略模式
2020/06/15 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
新护士岗前培训制度
2014/02/02 职场文书
研发工程师岗位职责
2014/04/28 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS