javascript - Bagaimana untuk mendapatkan nilai yang dipilih oleh radio dalam applet

Question

Bagaimana untuk mendapatkan nilai radio yang dipilih dalam program mini? Berikut adalah kod saya yang digunakan untuk membawa tiga soalan

/!-- 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

Demo rasmi

<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)
  }
})