釘釘小程序複選框 全選反選 表單獲取內容有誤處理

問題描述

   我的每一個複選框 是 利用 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的情況