javascript - 在小程序中如何获取radio选中的value
迷茫
迷茫 2017-05-19 10:13:59
[JavaScript讨论组]

请问在小程序中如何获取选中的radio的value值,以下是我的代码,用了三个swiper承载三个问题,选择完三个问题后弹出选择的结果,请问如何实现

/!-- index.wxml -->

                    
    
    第一题    
    第二题    
    第三题      


                    
    

                        
        
      
        
        
        
        
         
        

                        
        
                             
        
        
        
        
           
        

                        
        
       
        
        
        
        
           
     




// 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%;
}
迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(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)
  }
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号