钉钉小程序复选框 全选反选 表单获取内容有误处理

问题描述

   我的每一个复选框 是 利用 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的情况