微信小程序改变多组name相同的单选框对应的json数据

以底下的例子为例,在多组的单选框中改变对应的jason值:

wxml:


  
    
      
        序号:
        {{item.index}}
      
      
        国家:
        {{item.country}}
      
      
        经济:
        
          发展中国家
          发达国家
        
      
    
  

 wxss:

.myBottom {
  width: 90%;
  background-color: white;
  margin: auto auto;
  margin-top: 25px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}
.myMessTempC {
  border: 1rpx solid #eee;
  font-size: 25rpx;
  width: 100%;
  padding: 10rpx 10rpx;
}
.myMessContent {
  display: flex;
  flex-direction: row;
  height: 30px;
  align-items: center;
}
.myMessLeft {
  width: 20%;
  text-align: right;
}
.myMessRight {
  width: 80%;
}
.myMessRadioG {
  font-size: 16rpx;
}
.myMessRadioG radio {
  font-size: 30rpx;
  transform: scale(0.7);
}

js:

Page({
  data: {
    myContent:[
      { "index": 0, "country": "中国", "economic": ""},
      { "index": 1, "country": "美国", "economic": ""},
      { "index": 2, "country": "印度", "economic": "" },
      { "index": 3, "country": "日本", "economic": "" },
    ],
  },
  myRadioChange: function (e) {
    var radioId = e.currentTarget.dataset.id;//获取当前选择的ID
    var radioValue = e.detail.value;//获取当前选择的数值
    for (var value of this.data.myContent) {
      if (value.index === radioId) {
        this.data.myContent[radioId].economic = radioValue;
        break;
      }
    }
    var that = this
    that.setData({
      myContent: that.data.myContent//重新绑定数据且渲染页面内容
    })
    console.log('jason内的值已经发生变化:');
    console.log(that.data.myContent);
  },
  
})

题外:找了很多的资料,微信小程序中用form与input的方式,只能提交一组数据,不能满足多组相同数据提交的情况,所以应采用ajax的方式提交数据

你可能感兴趣的:(前端)