以底下的例子为例,在多组的单选框中改变对应的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的方式提交数据