复选框checkbox之全选、多选、反选_暖风阵阵的博客-程序员秘密

技术标签: checkbox  

复选框checkbox之全选、多选、反选

1,wxml

<view style="margin:100rpx 30rpx">
  <checkbox-group bindchange="checkboxAllChange">
    <label class="row align">
      <checkbox checked="{
    {checked}}"/>
      <view>全选</view>
    </label>
  </checkbox-group>
  <checkbox-group bindchange="checkboxChange">
    <label class="" wx:for="{
    {list}}" wx:key="index" class="row align" style='margin:20rpx 0'>
      <checkbox value="{
    {item.name}}" checked="{
    {item.checked}}"/>
      <view style="margin-right:40rpx">{
    {
    item.name}}</view>
      <view>{
    {
    '¥'+item.price}}</view>
    </label>
  </checkbox-group>
  <view>{
    {
    '共计¥'+sumPrice}}</view>
</view>

2,js

Page({
    
  data: {
    
    list:[
      {
    name:'苹果',price:10},
      {
    name:'哈密瓜',price:40},
      {
    name:'莲雾',price:50},
    ],
    sumPrice:0,
    checked:false
  },
  checkboxAllChange:function(){
    
    this.setData({
    
      checked:!this.data.checked,
    })
    var list = this.data.list
    var sumPrice = 0
    if(this.data.checked){
    
      list.every(v=>{
    
        return v.checked = true,sumPrice += v.price
      })
    }else{
    
      list.forEach(v=>{
    
       v.checked = false
       sumPrice = 0
      })
    }
    this.setData({
    
      list,
      sumPrice
    })
  },
  checkboxChange:function(e){
    
    var checked = this.data.checked
    const list = this.data.list
    const val = e.detail.value
    var sumPrice = 0,num = 0
    for (let i = 0; i < list.length;i++) {
    
      list[i].checked = false
      for (let j = 0;j < val.length;j++) {
    
        if (list[i].name == val[j]) {
    
          list[i].checked = true
          sumPrice += list[i].price
          num ++
          break
        }
      }
    }
    if(num == list.length){
    
      checked = true
    }else{
    
      checked = false
    }
    this.setData({
    
      list,
      sumPrice,
      checked
    })
    
  },
  
})
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46899191/article/details/113698476

智能推荐

18张图,直观理解为什么神经网络这么有效?_OneFlow深度学习框架的博客-程序员秘密

迄今,人们对神经网络的一大疑虑是,它是难以解释的黑盒。本文则主要从理论上理解为什么神经网络对模式识别、分类效果这么好,其本质是通过一层层仿射变换和非线性变换把原始输入做扭曲和变形,直至可以非常容易被区分不同的类别。实际上,反向传播算法(BP) 其实就是根据训练数据不断地微调这个扭曲的效果。......

子网掩码_weixin_30641465的博客-程序员秘密

问题 A: 子网掩码时间限制: 1 Sec 内存限制: 32 MB提交: 146 解决: 86[提交][状态][讨论版]题目描述子网掩码是用来判断任意两台计算机的IP地址是否属于同一子网络的根据。最为简单的理解就是两台计算机各自的IP地址与子网掩码进行AND运算后,如果得出的结果是相同的,则说明这两台计算机是处于同一个子网络上的,可以进行直接的通讯。就这么简单。请看以下示例:运...

安全技术 数字签名_ZWZhangYu的博客-程序员秘密_数字签名复制

(一)介绍数字签名是一种将相当于现实世界中的盖章、签字的功能在计算机世界中进行实现的技术。使用数字签名可以识别篡改和伪装,还可以防止否认。通过消息认证码,我们可以识别消息是否被篡改或者发送者身份是否被伪装,也就是可以校验消息的完整性,还可以对消息进行认证。然而,在出具借条的场景中却无法使用消息认证码,因为消息认证码无法防止否认。消息认证码之所以无法防止否认,是因为消息认证码需要在发送者Alice和接收者Bob两者之间共享同一个密钥。正是因为密钥是共享的,所以能够使用消息认证码计算出正确MAC值的并不只

Android的消息处理机制——Handler、Looper和Message_致YHT的博客-程序员秘密

转载地址:http://www.cnblogs.com/codingmyworld/archive/2011/09/12/2174255.htmlandroid的消息处理有三个核心类:Looper,Handler和Message。其实还有一个Message Queue(消息队列),但是MQ被封装到Looper里面了,我们不会直接与MQ打交道,因此我没将其作为核心类。下面一一介绍:线程的魔法...

c#网络通信框架networkcomms内核解析之一 消息传送_networkcomms的博客-程序员秘密

networkcomms.net 来自英国的网络通信框架 官方网址 www.networkcomms.net 中文网址www.networkcomms.cn在网络通信程序中,本地的类或者对象,要传输到通信的另一端,在网络上传输的时候是二进制流的形式。那么在发送消息的时候要把对象序列化为二进制流对方接收到二进制数据流要还原成对象。我们知道使用Tcp协议传输消息的时候有

Android aosp源码阅读_Notzuonotdied的博客-程序员秘密_android 源码阅读

前言最近因为找工作,需要频繁查阅Android源码。因此,打算在本地硬盘上下载Android源码,通过Android Studio来阅读。Android 源码构建:https://source.android.com/setup【建议直接阅读该文档】操作流程配置硬盘由于我使用的是MacOS,所以仅提供MacOS的配置流程。打开Disk UtilityFile -&gt; New Image -&gt; Blank Image按照下图配置一块200G,区分大小写的磁盘分区。一定要区分

随便推点

SSM框架的优势整合_现在告诉你你也不会记住的博客-程序员秘密

SSM框架的优势整合SSM为开发解决了什么问题?SSM框架:Spring+SpringMVC+MybatisSpring框架的优势:提供IOC容器,解决了层与层之间的耦合问题(对象之间的依赖关系)支持AOP编程(面向切面编程),方便对系统功能的拓展,如:权限控制、日志记录支持事务声明方便代码测试统一配置,灵活、拓展性好开源集成了各种优秀框架SpringMVC的优势:天...

信息浏览功能程序设计c语言,c语言程序设计实践报告_卿殷的博客-程序员秘密

一、 任务描述 通讯录程序设计设计一个实用的小型通讯录程序,具有添加,查询和删除功能。由姓名,籍贯,电话号码1,电话号码2,电子邮箱组成,姓名可以由字符和数字混合编码。电话号码可由字符和数字组成。实现功能: (1)系统以菜单方式工作(2)信息录入功能 (3)信息浏览功能 (4)信息查询功能 (5)信息修改功能 (6)系统退出功能二、算法描述设计一个实用的的小型通讯录...

对比激光SLAM与视觉SLAM:谁会成为未来主流趋势?_NicolasLearner的博客-程序员秘密

来源:智车科技摘要:SLAM(同步定位与地图构建),是指运动物体根据传感器的信息,一边计算自身位置,一边构建环境地图的过程,解决机器人等在未知环境下运动时的定位与地图构建问题。目前,SLAM 的主要应用于机器人、无人机、无人驾驶、AR、VR 等领域。其用途包括传感器自身的定位,以及后续的路径规划、运动性能、场景理解。由于传感器种类和安装方式的不同,SLAM 的实现方式和难度会有一定的差异。按传感器来分,SLAM 主要分为激光 SLAM 和 VSLAM 两大类。其中,激光 SLAM 比 VSL..

计算机的基础配置,教你认知电脑基本配置_weixin_39719165的博客-程序员秘密

计算机通俗来讲就是电脑,又分为台式机和笔记本。当然,两种产品各有优缺点,台式机在同等价位配置更高,能够做更多的工作,并且容易换配件,但是缺点就是不便于携带;笔记本可以更好的携带,适用于广大的办公人群,但是由于其集成度太高,配件不容易更换,当然,除了硬盘和内存,其他硬件基本没有自行更换的可能。那么计算机配置中硬件有哪些?又要如何选择呢?①cpu:计算机cpu是计算机的处理中心,目前CPU品牌分为英特...

分布式存储开发:Curve中的内存管理_网易杭研的博客-程序员秘密_curve存储

前言Curve 实践过程中遇到过几次内存相关的问题,与操作系统内存管理相关的是以下两次:chunkserver 上内存无法释放 mds 出现内存缓慢增长的现象内存问题在开发阶段大多很难发现,测试阶段大压力稳定性测试(持续跑7*24小时以上)、异常测试往往比较容易出问题,当然这还需要我们在测试阶段足够仔细,除了关注io相关指标外,还要关注服务端内存/CPU/网卡等资源使用情况以及采集的 metric 是否符合预期。比如上述问题 mds 内存缓慢增长 ,如果只关注io是否正常,在测试阶段是无法发现的