问题描述

   我的每一个复选框 是 利用 data声明的数组进行循环 遍历出来的

   然后当我点击全选及反选的时候  我操作了data中的item  遍历修改了 ischeck属性  页面上也是利用这个属性显示选中/非选中

出现的bug  

   当我反复点击了全选后  点击form表单的保存   获取的 表单的value中  关于复选框的值  会重复出现多个 例如复选框本身5个 当我反复点击全选5次后  复选框的value变成了25  原因是  利用item 循环的复选框 虽然通过外在修改了他的checked的属性  但是之前渲染的复选框 的值 依然存在

 

解决办法

axml 部分

<form  onSubmit="formSubmit" id="myform">
     <checkbox-group name="members">
         <label class="checkbox" a:for="{{items}}" >
            <checkbox name="checkbox" onChange="checkSingle" data-ckindex="{{index}}" value="{{item}}" checked="{{item.isCheck}}" disabled="{{item.disabled}}" />
            <text class="checkbox-text">{{item.realName}}</text>
         </label>
     </checkbox-group>
     <view class="{{items.length == 0 ? 'hidden' : 'checkbox_right'}}">
           <checkbox value='全选' onChange='checkedAll'></checkbox> 
           <text >一键全选</text>
     </view>
     <button class="btn" formType="submit">保存</button>
</form>

js部分

  formSubmit:function(e){
    const params = e.detail.value;
    delete params['members']
    params['members'] = this.data.items.filter((i)=> i.isCheck)
    console.info(params)
  },
  checkSingle:function(e){
    console.info(e)
    let ckval = e.detail.value
    let ckindex = e.currentTarget.dataset.ckindex
    let list = this.data.items.concat();
    list[ckindex]['isCheck'] = ckval;
    this.setData({
      items: list
    })
  },
  checkedAll:function (e) {
    console.info(e)
    let that = this
    let list = that.data.items.concat();
    list.map(o => {
      o.isCheck = e.detail.value;
    });
    that.setData({
      items: JSON.parse(JSON.stringify(list))
    })
  }

解决思路:

    1.form表单提交的时候 放弃使用 关于复选框的value  统一使用  data中 循环的数组数据

    2.全选 或者单点 某个复选框的时候 都去操作一下 data中的item   开始想循环 考虑到效率 这里利用了索引取值 提高性能

    3. 单点 全选  都操作 data中的数组中的对象   选中 ischeck  => true   取消  ischeck => false 

    4. 最后form表单提交  删除 value中的复选框信息  然后 将data中的复选框信息赋值给 form的value里   这里使用filter过滤 筛掉 ischeck 是false的情况

需求：动态渲染表格数据,批量选中表格行，选中之后把这些数据通过公共变量带到下一个页面进行展示再进行修改保存。

注意点：

1、这里checkbox有个大坑，本来想用小程序自带复选框，但终究满足不了需求，所以自定义按钮，给予选中及未选中状态再自定义属性绑定事件获取id，

2、直接setData修改数组中的某一项的注意点

效果图：

结果：提交的数据，要提交的id及要修改的数据
页面部分
<view class="table">
  <view class="thead">
    <view class='pin'>品名</view>
    <view>厚度</view>
    <view>宽度</view>
    <view>价格</view>
    <view>改后价格</view>
  </view>
    <view wx:for="{{listData}}" wx:key="{{code}}" class="tbody">
      <view class='pin'>
        <block wx-if="{{!item.checked}}">
          <icon type='circle' class='icon_none' data-index="{{index}}" bindtap="selectList"></icon>
        </block>
        <block wx-if="{{item.checked}}">
          <icon type="success" color="green" data-index="{{index}}" bindtap="selectList" />
        </block>
        <view>{{item.text}}</view>
      </view>
      <view>{{item.hou}}</view>
      <view>{{item.kuan}}</view>
      <view>{{item.price}}</view>
      <view>{{item.uprice}}</view>

    </view>
  <view class='note' wx:if="{{close}}">
    <view class='notecon'>
      <view class='note-lef'>
        <image src='../images/fb.png'></image>
        <text>红色数字表示包含该值！</text>
      </view>
      <view class='note-rig' catchtap='closenote' >
        <image src='../images/fb2.png'></image>
      </view>
    </view>
  </view>
</view>
<view class='footer' wx:if="{{!posting}}">
  <button class='btn' bindtap='updateJc'>修改基础价格</button>
  <button class='btn2' bindtap='updateMx'>修改明细价格</button>
</view>
<view class='footer' wx:if="{{posting}}">
  <view class='footer-lef'>
    <radio-group class="radio-group" bindchange="radioChange">
      <label class="radio" wx:for="{{items}}" wx:key>
        <radio value="{{item.id}}" checked="{{item.checked}}" /> {{item.value}}
      </label>
    </radio-group>
  </view>
  <view class='footer-mid'><input type='text' placeholder='20'></input></view>
  <view class='footer-rig'><button bindtap='saveUp'>保存</button></view>
</view>

数据部分：
data: {
    close: true,
    posting: false,
    mingxi: "",
    arr: [],//选中的数组对象
    listData: [{
      "id": 0,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 1,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 2,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 3,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 4,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 5,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 6,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 7,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    },
    {
      "id": 8,
      "text": "冷轧窄带",
      "hou": "0.4-0.45 ",
      "kuan": "7-19.9",
      "price": "3902",
      "uprice": "2334"
    }
    ],
    items: [{
      value: "加",
      id: "0"
    }, {
      value: "减",
      id: "1"
    }]
  },

页面初始化给每个复选框添加未选中属性
onLoad: function (options) {
    let dataList = this.data.listData;
    dataList.map(function (value) {
      value.checked = false;
    })
  },

点击复选框获取复选框id
selectList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.listData;
    const checked = carts[index].checked;
    carts[index].checked = !checked;
    let listArr = [];
    for (var i in carts) {
      if (carts[i].checked) {
        listArr.push(carts[i]);
      }
    }
    this.setData({
      listData: carts,
      arr: listArr
    });
  },

点击修改基础价格跳转页面并把点击的数据带到下一页
 updateJc(e) {
    if (this.data.arr.length == 0) {
      wx.showToast({
        title: '请至少选择一项',
        icon: "none"
      })
      return
    }
    wx.navigateTo({
      // url: './updjichu/index?jichu=' + JSON.stringify(this.data.arr)
      url: './updjichu/index?jichu' 
    })
    app.fabuData=JSON.stringify(this.data.arr);
  },

1、在下一个页面进行数据接收，拿到数据存到变量

2、拿到文本框数据，双向数据绑定，使用this.setData修改数据中的价格

3、把每行对应的id和修改后的价格组成对象并提交
onLoad: function(options) {
    console.log(app.fabuData)
    this.setData({
      listData: JSON.parse(app.fabuData)
    })
  },
  // 获取价格输入框
  userNameInput: function(e) {
    let index=e.target.dataset.index;
    let up = `listData[${index}].price`;
    this.setData({
      [up]:e.detail.value
    })
    // this.data.listData[index].price = e.detail.value;
    // console.log(this.data.listData)
   
  },
  // 运行计算
  calculate(e) {
    let arr=this.data.listData.map((item, index) => {
      var objr={};
      objr.id=this.data.listData[index].id;
      objr.price = this.data.listData[index].price
      return objr
    })
    this.setData({
      calculateArr:arr
    })
    console.log(arr);
  },

文章目录
前言
通用设置切入点
分析通用设置数据结构
分析通用设置数组
随机的数组下标

前言

微信版本2.8.0.121

分析诉求->通过代码实现关闭微信通用设置里的“有更新时自动升级微信"。
通用设置切入点
这种复选框的设置无非就是一个标志位的问题，分析起来比较简单，中间肯定会涉及到一些数据结构。作为开发者肯定不会把每一个设置选项都单独存放，而是放在一个数据结构里方便管理。
首先用CE附加微信

在取消勾选状态下搜索0

在勾选状态下搜索1

重复这个步骤，直到筛选出唯一一个地址。

然后在这个地址上下内存写入断点，并且让程序断下
分析通用设置数据结构

eax+0x8就是我们要找的标志位，这里要往上追eax的值
基址=eax+0x8


eax一般作为返回值来源于上面的call，但是上面一个call不会断下，说明不来自于call，而是来自[ecx]
基址=[ecx]+0x8


在这个位置下断，查看[ecx]+0x8的值，这里我们发现不是我们要找的标志位，说明中间有代码改变了ecx的值


一直F7往下走，发现有一个循环，先确定循环头和循环尾，接着来分析整段代码

先比较[eax+0x4]的值是否等于ebx，这里是循环的跳出条件。ebx等于0x69，这个0x69后续等分析完了整个结构大概可以猜到是什么。

接着edx自增1，edx的值在循环体外被初始化为0，说明这个edx相当于循环的i。然后比较edx和esi，esi的值为0x12，也就是说循环的次数最大为0x12，整个数据结构的总共有0x12个成员。
继续往下

这里将ecx+4，数据窗口跟随查看一下ecx，这种连续的地址明显是一个数组。ecx是数组首地址。这个数组没有用最常见的的[eax+ecx*4]的方式进行遍历，而是用首地址一直+4的方式来遍历整个数组。
再回到之前的偏移表达式

这里ecx来自于[edi+0x4]，[edi+0x4]就是数组首地址
基址=[[edi+0x4]]+0x8

这里就要修改一下这个偏移表达式了
基址=[[edi+0x4]+i*0x4]+0x8

接下来确定数组下标

在循环跳出条件的地址下断，观察edx的值，此时edx等于4

当下标为4时，这个结构体数组指向我们要找的标志位
基址=[[edi+0x4]+4*0x4]+0x8

继续往上追edi

edi来自[esi+0x4]
基址=[[[esi+0x4]+0x4]+4*4]+0x8

往上找esi

esi来自ecx
基址=[[[ecx+0x4]+0x4]+4*4]+0x8

返回上层函数追ecx

ecx来自edi

edi又来自ecx，返回上层追ecx

ecx来自eax，进到上面的call追eax

这里我们看到eax来自于一个基址[0x6B706198]，到这里，禁止更新的基址就找完了。
分析通用设置数组
接着我们来分析一下整个结构体数组
[[[[0x6B706198]+0x4]+0x4]+i*4]+0x8

整个表达式可以拆分为下面几部分
数组首地址=[[0x6B706198]+0x4]+0x4
数组下标=i*4
偏移=0x8


首先来观察数组的首地址，0x2B32A58就是整个通用设置结构体数组的首地址，下面的0x12是数组成员个数。数据窗口跟随

这里是结构体数组，每一个成员都是一个结构体。再观察下标为4的表达式内容
[[[[0x6B706198]+0x4]+0x4]+4*4]+0x8


这里的值为0x69，正好是循环的结束条件，这个应该是类似功能ID之类的唯一标识。另外每一个下标都对应不同的通用设置，这里列出部分
i=2：开启新消息提醒声音
i=3：开启语音和视频通话提醒声音
i=4：有更新时自动升级微信
i=5：热键与其他冲突时提醒
i=6：适用系统缩放比例

这里还会碰到一个很玄学的问题，每台电脑的偏移不一样，比如i=4在我这里是有更新时自动升级微信，在另外一台机器上可能是i=7的时候是这个功能设置。
随机的数组下标
想要解决这个问题，就要回顾之前的代码

这一块是整个数组的遍历代码，所有的通用设置都会走这段代码，当勾选开启语音和视频通话提醒声音时，这个功能ID为0x68
0x68：开启新消息提醒声音
0x172：开启语音和视频通话提醒声音
0x69：有更新时自动升级微信
0x6D:保留聊天记录

所以修改通用设置的关键并不是数组下标对应的标志位，这个数组下标是随机的。关键在于功能ID对应的标志位，有点类似Key->Value的组合
功能ID：[[[[0x6B706198]+0x4]+0x4]+i*4]+0x4
标志位：[[[[0x6B706198]+0x4]+0x4]+i*4]+0x8

如果想要修改对应的通用设置，就要先比对功能ID，然后修改ID对应的标志位。到这里，整个通用设置算是分析完成了。
最后 附Github地址：https://github.com/TonyChen56/WeChatRobot

        如今，采用网上考试并实现自动评阅已经成为一种趋势。本案例需设计两个页面：一个是提交信息页面，另一个是获取提交信息处理并显示页面。
        设计关键：1.对于互斥的单选框，只允许单选的列表框，只专递一个参数。
                             2.对于复选框，可多选列表框，需专递多个参数，通过数组保存并获取参数。
提交信息页面程序：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
  <head>    
    <title>简单的网上试题自动测评系统</title>
  </head>
  <body>
  <form action="show0317.jsp" method="post">
       一.  2+3=？<br>
       <input type="radio" name="r1" value="2" checked="checked">2 
       <input type="radio" name="r1" value="3">3  
       <input type="radio" name="r1" value="4">4 
       <input type="radio" name="r1" value="5">5<br>
      二. 下列哪些是偶数？<br>  
       <input type="checkbox" name="c1" value="2">2 
       <input type="checkbox" name="c1" value="3">3 
       <input type="checkbox" name="c1" value="4">4 
       <input type="checkbox" name="c1" value="5">5<br>
   三.下列哪些是动态网页？<br>  
       <select size="4" name="list1" multiple="multiple">
       <option value="asp">ASP</option>
       <option value="php">PHP</option>
       <option value="htm">JSP</option>
       <option value="jsp">HTML</option>
       <option value="xyz" selected="selected">xyz</option>  
       </select><br>
       四.下列组件哪些是服务器端的？<br>  
       <select size="1" name="list5">
       <option value="jsp">JSP</option>
       <option value="servlet">SERVLET</option>
       <option value="java">JAVA</option>
       <option value="jdbc">JDBC</option>
       </select><br>
       五.在服务器端接受用户请求的对象是：
       <input type="text" size="20" name="text1"><br>
       <div align="left">
       <blockquote>
       <input type="submit" value="提交" name="button1">
       <input type="submit" value="重置" name="button2">
       </blockquote>
       </div>    
  </form>
  </body>
</html>

获取提交信息并处理显示程序：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
  <head>
    <title>测评结果显示</title>  
  </head>
  <body>
  <% String s1=request.getParameter("r1");
     if(s1!=null){
     out.println("一. 解答为2+3="+s1+" ");
     if(s1.equals("5")) out.println("正确"+"<br>");
     }else out.println("一.没有解答！");
     out.println("-------------------<br>");
     String[] s21=request.getParameterValues("c1");
     if(s21!=null){
     out.println("二.解答为:偶数有：");
     for(int i=0;i<s21.length;++i){
     out.println(s21[i]+" ");
     }
     if(s21.length==2&&s21[0].equals("2")&&s21[1].equals("4")){
     out.println("正确!"+"<br>");
     }else{ out.println("错误！"+"<br>");
     }
     }else{ out.println("二.没有解答");
     out.println("-------------<br>");
     }
     String[] s31=request.getParameterValues("list1");
     if(s31!=null){
     out.println("三. 解答为：动态网页有：");
     for(int i=0;i<s31.length;++i){
     out.println(s31[i]+" ");
     }
     if(s31.length==3&&s31[0].equals("sap")&&s31[1].equals("php")
        &&s31[2].equals("jsp")) out.println("正确！"+"<br>");
        else out.println("错误！"+"<br>");
        }else out.println("三，没有解答");
        out.println("-----------<br>");
        String s4=request.getParameter("list5");
        if(s4!=null){
        out.println("四，解答为：服务器端的组件有：");
        out.println(s4+" ");
        if(s4!=null&&s4.equals("servlet")) out.println("正确！"+"<br>");
        else out.println("错误！"+"<br>");
        }else out.println("四，没有解答");
        out.println("----------------<br>");
        String s5=request.getParameter("text1");
        if(s5!=null){
        out.println("五，解答为：");
        out.println(s5+" ");
        if(s5!=null&&s5.equals("request")) out.println("正确!"+"<br>");
        else out.println("错误!"+"<br>");
        }else out.println("五，没有解答");
        out.println("------------------<br>");
   %>
  </body>
</html>


试题界面：


测评结果界面：