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

最新推荐文章于 2024-05-11 22:47:01 发布

_枸杞子_

最新推荐文章于 2024-05-11 22:47:01 发布

阅读量3.2k

点赞数

分类专栏： MUI_教程版

本文链接：https://blog.csdn.net/qq_33605778/article/details/78448227

版权

MUI_教程版专栏收录该内容

10 篇文章 0 订阅

订阅专栏

视频教程：点击这里

radio用于单选的情况

微信公众号：JavaWeb架构师

普通单选框

DOM结构

<div class="mui-input-row mui-radio">
    <label>PHP</label>
    <input name="language" type="radio" value="PHP">
</div>

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

<div class="mui-input-row mui-radio mui-left">

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

<input name="language" type="radio" value="PHP" 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结构如下：

<ul class="mui-table-view mui-table-view-radio">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell mui-selected">
        <a class="mui-navigate-right">Item 2</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 3</a>
    </li>
</ul>

列表式单选在切换选中项时会触发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

测试代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>复选框（checkbox）</title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">
            mui.init();

            mui.ready(function() {

                // 1.普通单选框判断选中
                document.getElementById('doDiv').addEventListener('tap',function () {
                        var choose = document.getElementsByName("choose");
                        for (var i = 0; i < choose.length; i++) {
                            if( choose[i].checked ) {
                                mui.alert(choose[i].value + ":" + choose[i].checked)
                            }
                        }
                })


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

                    mui.alert(e.detail.el.innerText)
                })

                // 获取选取情况
                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))
                        }
                })
            })

        </script>

        <style type="text/css">
            .radioOne {
            }
        </style>
    </head>

    <!--

    -->
    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">单选框（radio）</h1>
        </header>

        <div class="mui-content">
            <!-- 1.普通单选 -->
            <div class="radioOne">
                    <!-- 在div上增加mui-left/right控制单选框的位置 -->
                    <div class="mui-input-row mui-radio mui-left">
                        <label>小甜甜</label>
                        <!-- 使用checked属性默认选中 -->
                        <input name="choose" type="radio" value="小甜甜" checked>
                    </div>

                    <div class="mui-input-row mui-radio">
                        <label>JavaWeb架构师</label>
                        <input type="radio" name="choose" value="JavaWeb架构师" />
                    </div>

                    <div class="mui-input-row mui-radio">
                        <label>禁用</label>
                        <!-- 加上disabled属性禁用 -->
                        <input type="radio" name="choose" value="JavaWeb架构师" disabled="disabled"/>
                    </div>

                    <input type="submit" id="doDiv" value="Div形式" />

            </div>

            <!-- 列表单选 -->
            <div class="radioTwo">
                    <!-- 列表选择：在列表根节点上增加.mui-table-view-radio类即可 -->
                    <ul class="mui-table-view mui-table-view-radio" id="doUl">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">Java</a>
                        </li>
                        <!-- 默认选中：只需要在对应li节点上增加.mui-selected类 -->
                        <li class="mui-table-view-cell mui-selected">
                            <a class="mui-navigate-right">C++</a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">PHP</a>
                        </li>
                    </ul>
                    <button id="btnUl">列表形式</button>
            </div>
        </div>

    </body>

</html>

效果

微信公众号：JavaWeb架构师

视频教程：点击这里

源码下载

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

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载

_枸杞子_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
010-跨平台开发-MUI-单选框及取值（radio）

视频教程：点击这里radio用于单选的情况普通单选框DOM结构<div class="mui-input-row mui-radio"> <label>PHP</label> <input name="language" type="radio" value="PHP"></div> 默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：
复制链接

扫一扫