我们假设这段json是由后端传给我们在前端的遍历的
GoodArr:[{name:"名称一"},{name:"名称二"},{name:"名称三"},{name:"名称四"}]//商品列表我们在微信小程序中遍历生成表单
viewviewviewwx:for="{{GoodArr}}"wx:for-item="goods"wx:key="index"viewview名称/viewinputvalue='{{goods.name}}'data-index="{{index}}"bindinput="nameBtn"maxlength="10"placeholder="请输入名称"/view数量/viewinputvalue='{{goods.count}}'data-index="{{index}}"bindinput='countBtn'maxlength="10"placeholder="请输入数量"//viewviewview物流服务/viewcheckbox-groupname="checkbox"data-index="{{index}}"bindchange="checkboxChange"labelcheckboxvalue="1"/配送/labellabelcheckboxvalue="2"/代收/label/checkbox-group/view/view/viewviewbuttoncatchtap='submitBtn'提交/button/view/view我们要在表单上添加自定义属性data-index，这个是添加循环的表单索引
我们可以获取到e的下面具备索引和value,
letdataset=e.currentTarget.dataset;//获取索引letvalue=e.detail.value;//获取checkbox选中的数组我们看到原本后端传给我我们的数据只有name,但是我们回传给服务端的数据要有【数量】和【物流服务】;
所以我们要改造原来的数组添加一下我们需要的属性，这个也根据服务端要求我们定的字段定
/生命周期函数--监听页面加载/onLoad:function(options){vararr=this.data.GoodArr;//创建一个数组for(vari=0;ithis.data.GoodArr.length;i++){arr[i].name=this.data.GoodArr[i].name;arr[i].count=0;//添加数量属性countarr[i].checkedArr=[];//添加物流服务数组checkedArr}this.setData({//将新数组赋值给原来的数组,这样GoodArr里面对象就有了count和checkedArrGoodArr:arr});console.log(this.data.GoodArr);},设置复选框双向数据绑定
checkboxChange:function(e){//复选框console.log(e);letdataset=e.currentTarget.dataset;//获取索引letvalue=e.detail.value;//获取checkbox选中的数组letarr=this.data.GoodArr;//console.log(dataset);arr[dataset.index].checkedArr=value;this.setData({checkedArr:arr})//console.log(this.data.GoodArr);},设置input双向数据绑定
countBtn:function(e){//获取数量letdataset=e.currentTarget.dataset;//获取索引letvalue=e.detail.value;//获取valueconsole.log(dataset);console.log(value);letarr=this.data.GoodArr;arr[dataset.index].count=value;console.log(this.data.GoodArr);},获取全部的表单数据
以下贴上全部WXML和JS代码
!--page/test/test.wxml--text订单列表/textviewviewviewwx:for="{{GoodArr}}"wx:for-item="goods"wx:key="index"viewview名称/viewinputvalue='{{goods.name}}'data-index="{{index}}"bindinput="nameBtn"maxlength="10"placeholder="请输入名称"/view数量/viewinputvalue='{{goods.count}}'data-index="{{index}}"bindinput='countBtn'maxlength="10"placeholder="请输入数量"//viewviewview物流服务/viewcheckbox-groupname="checkbox"data-index="{{index}}"bindchange="checkboxChange"labelcheckboxvalue="1"/配送/labellabelcheckboxvalue="2"/代收/label/checkbox-group/view/view/viewviewbuttoncatchtap='submitBtn'提交/button/view/viewJS代码
//page/test/test.jsPage({/页面的初始数据/data:{GoodArr:[{name:"名称一"},{name:"名称二"},{name:"名称三"},{name:"名称四"}]//商品列表},submitBtn:function(e){//提交按钮console.log(this.data.GoodArr);//获取全部的表单数据，并发请求提交到服务端},checkboxChange:function(e){//复选框console.log(e);letdataset=e.currentTarget.dataset;//获取索引letvalue=e.detail.value;//获取checkbox选中的数组letarr=this.data.GoodArr;//console.log(dataset);arr[dataset.index].checkedArr=value;this.setData({checkedArr:arr})//console.log(this.data.GoodArr);},countBtn:function(e){//获取数量letdataset=e.currentTarget.dataset;//获取索引letvalue=e.detail.value;//获取valueconsole.log(dataset);console.log(value);letarr=this.data.GoodArr;arr[dataset.index].count=value;console.log(this.data.GoodArr);},nameBtn:function(e){letdataset=e.currentTarget.dataset;//获取索引letvalue=e.detail.value;//获取valueletarr=this.data.GoodArr;arr[dataset.index].name=value;console.log(this.data.GoodArr);},/生命周期函数--监听页面加载/onLoad:function(options){vararr=this.data.GoodArr;for(vari=0;ithis.data.GoodArr.length;i++){arr[i].name=this.data.GoodArr[i].name;arr[i].count=0;arr[i].checkedArr=[];}this.setData({GoodArr:arr});console.log(this.data.GoodArr);},/生命周期函数--监听页面初次渲染完成/onReady:function(){},/生命周期函数--监听页面显示/onShow:function(){},/生命周期函数--监听页面隐藏/onHide:function(){},/生命周期函数--监听页面卸载/onUnload:function(){},/页面相关事件处理函数--监听用户下拉动作/onPullDownRefresh:function(){},/页面上拉触底事件的处理函数/onReachBottom:function(){},/用户点击右上角分享/onShareAppMessage:function(){}})
