业务场景：一串一组表单在微信小程序中由后端获取的json数据循环遍历生成的，我们填好表单后要给后端在传回去。

我们假设这段json是由后端传给我们在前端的遍历的

    GoodArr: [      {name:"名称一"},      {name:"名称二"},      {name:"名称三"},      {name:"名称四"}    ] // 商品列表

我们在微信小程序中遍历生成表单

<view class="page-body">  <view class="page-section">    <view wx:for="{{GoodArr}}" wx:for-item="goods" wx:key="index" class="weui-cells weui-cells_after-title margintop">      <view class="weui-cell weui-cell_input">        <view>名称</view>        <input value='{{goods.name}}' data-index="{{index}}" bindinput="nameBtn" class="weui-input ipt" maxlength="10" placeholder="请输入名称" />        <view>数量</view>        <input value='{{goods.count}}' data-index="{{index}}" bindinput='countBtn' class="weui-input ipt" maxlength="10" placeholder="请输入数量" />      </view>      <view class="weui-cell weui-cell_input">        <view>物流服务</view>        <checkbox-group name="checkbox" data-index="{{index}}" bindchange="checkboxChange">          <label>            <checkbox value="1"/>配送</label>          <label>            <checkbox value="2"/>代收</label>        </checkbox-group>      </view>    </view>  </view>  <view class="button-sp-area">    <button catchtap='submitBtn'>提交</button>  </view></view>

我们要在表单上添加自定义属性data-index，这个是添加循环的表单索引

我们可以获取到e的下面具备索引和value,

    let dataset = e.currentTarget.dataset;  // 获取索引    let value = e.detail.value; // 获取checkbox选中的数组

我们看到原本后端传给我我们的数据只有name,但是我们回传给服务端的数据要有【数量】和【物流服务】;

所以我们要改造原来的数组添加一下我们需要的属性，这个也根据服务端要求我们定的字段定

  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    var arr = this.data.GoodArr; // 创建一个数组    for (var i = 0; i < this.data.GoodArr.length;i++){      arr[i].name = this.data.GoodArr[i].name;      arr[i].count = 0; // 添加数量属性count      arr[i].checkedArr = []; // 添加物流服务数组checkedArr    }    this.setData({ // 将新数组赋值给原来的数组,这样GoodArr里面对象就有了count和checkedArr      GoodArr: arr    });    console.log(this.data.GoodArr);  },

设置复选框双向数据绑定

  checkboxChange:function(e){ // 复选框    console.log(e);    let dataset = e.currentTarget.dataset;  // 获取索引    let value = e.detail.value; // 获取checkbox选中的数组    let arr = this.data.GoodArr;     // console.log(dataset);    arr[dataset.index].checkedArr = value;    this.setData({      checkedArr: arr    })    // console.log(this.data.GoodArr);  },

设置input双向数据绑定

  countBtn:function(e){ // 获取数量    let dataset = e.currentTarget.dataset; // 获取索引    let value = e.detail.value; // 获取value    console.log(dataset);    console.log(value);    let arr = this.data.GoodArr;     arr[dataset.index].count = value;    console.log(this.data.GoodArr);  },

获取全部的表单数据

以下贴上全部WXML和JS代码

<!--page/test/test.wxml--><text>订单列表</text><view class="page-body">  <view class="page-section">    <view wx:for="{{GoodArr}}" wx:for-item="goods" wx:key="index" class="weui-cells weui-cells_after-title margintop">      <view class="weui-cell weui-cell_input">        <view>名称</view>        <input value='{{goods.name}}' data-index="{{index}}" bindinput="nameBtn" class="weui-input ipt" maxlength="10" placeholder="请输入名称" />        <view>数量</view>        <input value='{{goods.count}}' data-index="{{index}}" bindinput='countBtn' class="weui-input ipt" maxlength="10" placeholder="请输入数量" />      </view>      <view class="weui-cell weui-cell_input">        <view>物流服务</view>        <checkbox-group name="checkbox" data-index="{{index}}" bindchange="checkboxChange">          <label>            <checkbox value="1"/>配送</label>          <label>            <checkbox value="2"/>代收</label>        </checkbox-group>      </view>    </view>  </view>  <view class="button-sp-area">    <button catchtap='submitBtn'>提交</button>  </view></view>

JS代码

// page/test/test.jsPage({  /**   * 页面的初始数据   */  data: {    GoodArr: [      {name:"名称一"},      {name:"名称二"},      {name:"名称三"},      {name:"名称四"}    ] // 商品列表  },  submitBtn:function(e){ // 提交按钮    console.log(this.data.GoodArr); // 获取全部的表单数据 ，并发请求提交到服务端  },  checkboxChange:function(e){ // 复选框    console.log(e);    let dataset = e.currentTarget.dataset;  // 获取索引    let value = e.detail.value; // 获取checkbox选中的数组    let arr = this.data.GoodArr;     // console.log(dataset);    arr[dataset.index].checkedArr = value;    this.setData({      checkedArr: arr    })    // console.log(this.data.GoodArr);  },  countBtn:function(e){ // 获取数量    let dataset = e.currentTarget.dataset; // 获取索引    let value = e.detail.value; // 获取value    console.log(dataset);    console.log(value);    let arr = this.data.GoodArr;     arr[dataset.index].count = value;    console.log(this.data.GoodArr);  },  nameBtn:function(e){    let dataset = e.currentTarget.dataset; // 获取索引    let value = e.detail.value; // 获取value    let arr = this.data.GoodArr;    arr[dataset.index].name = value;    console.log(this.data.GoodArr);  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    var arr = this.data.GoodArr;    for (var i = 0; i < this.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() {}})