010-跨平台开发-MUI-单选框及取值（radio）

视频教程：点击这里

• radio用于单选的情况

微信公众号：JavaWeb架构师

普通单选框

• DOM结构

    PHP
    
  

• 默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

• 若要禁用radio，只需在radio上增加disabled属性即可；

• 获取选中情况

var ele = document.getElementsByName("language");
for (var i = 0; i < ele.length; i++) {
    mui.alert(ele[i].value + ": " + ele[i].checked)
}

列表单选框

• mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：

    

        Item 1
    
    

        Item 2
    
    

        Item 3
    

• 列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML：

/*
 * 2.列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）
 * 中可以获得当前选中的dom节点
 */
document.getElementById('doUl').addEventListener('selected',function (e) {
    mui.toast(e.detail.el.innerText)
})

• 可以使用li标签中的class值：mui-selected 来判断是否选中了某个项。

// 获取选取情况
document.getElementById('btnUl').addEventListener('tap',function () {
        var obj = mui("#doUl li");
        for (var i = 0; i < obj.length; i++) {
            mui.alert( obj[i].innerText + ':' + /mui-selected/.test(obj[i].className))
        }
})

• 代码块激活字符:

mradio

测试代码

    
        
        
        
        
        
        
        
        
        
    
    
    
    
        

            
            
单选框（radio）
        
        
        

            
            

                    
                    

                        小甜甜
                        
                        
                    
                    
                    

                        JavaWeb架构师
                        
                    
                    
                    

                        禁用
                        
                        
                    
                    
                    
                    
            
            
            
            

                    
                    

                        

                            Java
                        
                        
                        

                            C++
                        
                        

                            PHP
                        
                    
                    列表形式
            
        
        
    

效果

微信公众号：JavaWeb架构师

视频教程：点击这里

源码下载

关注下方的微信公众号，回复：mui_course.code

​

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载