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

问题描述

我的每一个复选框是利用 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.valuelet ckindex = e.currentTarget.dataset.ckindexlet list = this.data.items.concat();list[ckindex]['isCheck'] = ckval;this.setData({items: list})},checkedAll:function (e) {console.info(e)let that = thislet 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的情况

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

小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
html 怎么整体全选功能,html复选框全选按钮
如何用html做复选框全选中和全不选中 html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = documen ...
Jquery 复选框全选与反选点击执行一次然后失效解决方案
Jquery 复选框全选与反选点击执行一次然后失效解决方案参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
自制jQuery 复选框全选与反选插件
(function ($) { //复选框全选 $.fn.checkAll = function (options) { var defaults = { chName:"checkName ...
复选框全选以及获取所有选中的值
复选框全选以及获取所有选中的值总结一下 jsp中获取数据 <%Map<String,List> map = (Map<String,List>)Function ...
html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...

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

问题描述

出现的bug

解决办法

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

最新文章

热门文章

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

问题描述

出现的bug

解决办法

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

最新文章

热门文章

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

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