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

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

wxml:

<view class="myBottom">
  <block wx:for="{{myContent}}" wx:key="myContentId">
    <view class="myMessTempC">
      <view class="myMessContent">
        <view class="myMessLeft">序号:</view>
        <text class="myMessRight">{{item.index}}</text>
      </view>
      <view class="myMessContent">
        <view class="myMessLeft">国家:</view>
        <text class="myMessRight">{{item.country}}</text>
      </view>
      <view class="myMessContent">
        <view class="myMessLeft">经济:</view>
        <radio-group bindchange="myRadioChange" data-id="{{index}}" class="myMessRight myMessRadioG">
          <radio value='发展中国家'>发展中国家</radio>
          <radio value='发达国家'>发达国家</radio>
        </radio-group>
      </view>
    </view>
  </block>
</view>

 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的方式提交数据

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值