javascript – So erhalten Sie den vom Radio im Applet ausgewählten Wert

Question

Wie erhalte ich den Wert des ausgewählten Radios im Miniprogramm? Nach der Auswahl der drei Fragen wird das Auswahlergebnis angezeigt

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

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