javascript - How to get the value selected by the radio in the applet

Question

How to get the value of the selected radio in the mini program. The following is my code. Three swipers are used to carry three questions. After selecting the three questions, the selection result pops up. How to implement it

/!-- index.wxml -->

                    <!-- 问题区域 -->
<view class="swiper-tab">    
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">第一题</view>    
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">第二题</view>    
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">第三题</view>      
</view>

                    <!-- 选项区域 -->
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">    

                    <!-- 第一题选项 -->    
    <swiper-item>    
      <radio-group bindchange="swiperChange">
        <label class="option"><radio checked="" value="1" name="1"  />A</label>
        <label class="option"><radio checked="" value="2" name="1"  />B</label>
        <label class="option"><radio checked="" value="3" name="1"  />C</label>
        <label class="option"><radio checked="" value="4" name="1"  />D</label>
      </radio-group>   
    </swiper-item>    

                    <!-- 第二题选项 -->    
    <swiper-item>    
      <radio-group bindchange="swiperChange">                       
        <label class="option"><radio checked="" value="1" name="2"  />A</label>
        <label class="option"><radio checked="" value="2" name="2"  />B</label>
        <label class="option"><radio checked="" value="3" name="2"  />C</label>
        <label class="option"><radio checked="" value="4" name="2"  />D</label>
      </radio-group>     
    </swiper-item>    

                    <!-- 第三题选项 -->    
    <swiper-item>    
      <radio-group bindchange="swiperChange"> 
        <label class="option"><radio checked="" value="1" name="3"  />A</label>
        <label class="option"><radio checked="" value="2" name="3"  />B</label>
        <label class="option"><radio checked="" value="3" name="3"  />C</label>
        <label class="option"><radio checked="" value="4" name="3"  />D</label>
      </radio-group>     
    </swiper-item> 
</swiper>



// index.js
var app = getApp()  
Page({  
    data: {  
        /**   
         * 页面配置  
         */  
        winWidth: 0,  
        winHeight: 0,  
        // tab切换    
        currentTab: 0,  
                value: []
    },  
    onLoad: function() {  
        var that = this;  
  
        /**   
         * 获取系统信息  
         */  
        wx.getSystemInfo({  
  
            success: function(res) {  
                that.setData({  
                    winWidth: res.windowWidth,  
                    winHeight: res.windowHeight  
                });  
            }  
  
        });  
    },  


    /**   
     * 滑动切换tab  
     */  
    bindChange: function(e) {  
  
        var that = this;  
        that.setData({  
            currentTab: e.detail.current  
        });  
  
    }, 
        
        /**
         * 点击radio切换
         */
         swiperChange: function(e){
                var that = this;
                var radioValue = e.detail.value;
                that.setData({
                    value : radioValue
                })
                console.log(that.data.value);
                if(that.data.currentTab>=2){
                    wx.navigateTo({
                        url: '../page3/page3',
                    });
                }else{
                    that.setData({
                        currentTab: that.data.currentTab + 1
                    }); 
                }
         }  
})  




/* index.wxss */
.swiper-tab{    
    width: 100%;    
    border-bottom: 2rpx solid #777777;    
    text-align: center;    
    line-height: 80rpx;
}

.swiper-tab-list{ 
    float: left; 
    font-size: 30rpx;       
    width: 100%;   
    color: #777777;
        display: none;  
}    

.on{ 
        color: #da7c0c;    
    border-bottom: 5rpx solid #da7c0c;
        display: block;
}    
    
.swiper-box{ 
        display: block; 
        height: 100%; 
        width: 100%; 
        overflow: hidden; 
}

.swiper-box view{    
    text-align: center;    
}  

radio{
    display: none;
} 

.option{
    border: 1px solid #ffe131;
    display: block;
    text-align: center;
    margin: 10% auto;
    width: 80%;
}

Answer 1

Official demo

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})