具体见代码：

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link href="css/mui.min.css" rel="stylesheet" />

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <h1 class="mui-title">单选和多选的复选框</h1>

        </header>

        <div class="mui-content">

            <!--

                单选复选框：一定要将其input上name属性添加相同的名

            -->

            <h5 class="mui-content-padded">性别：方式一</h5>

            <div class="mui-content-padded">

                <form action="" class="mui-input-group">

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

                    <label>男</label>

                    <!--checked：表示处于选中状态-->

                    <input type="radio" name="gender" checked id="" value="" />

                </div>

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

                    <label>女</label>

                    <input type="radio" name="gender" id="" value="" />

                </div>

                <!--mui-disabled:字体颜色变淡，disabled：禁止选择颜色变化(小圆点)-->

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

                    <label>保密</label>

                    <input type="radio" disabled name="" id="" value="" />

                </div>

            </form>

            </div>

            <!--没有mui-content-padded属性-->

            <form action="" class="mui-input-group">

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

                    <label>男</label>

                    <!--checked：表示处于选中状态-->

                    <input type="radio" name="gender" checked id="" value="" />

                </div>

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

                    <label>女</label>

                    <input type="radio" name="gender" id="" value="" />

                </div>

                <!--mui-disabled:字体颜色变淡，disabled：禁止选择颜色变化(小圆点)-->

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

                    <label>保密</label>

                    <input type="radio" disabled name="" id="" value="" />

                </div>

            </form>

            <h5 class="mui-content-padded">性别：方式二</h5>

            <!--mui-card:该属性有圆角和阴影-->

            <div class="mui-card">

            <form action="" class="mui-input-group">

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

                    <label>男</label>

                    <!--checked：表示处于选中状态-->

                    <input type="radio" name="gen" checked id="" value="" />

                </div>

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

                    <label>女</label>

                    <input type="radio" name="gen" id="" value="" />

                </div>

                <!--mui-disabled:字体颜色变淡，disabled：禁止选择颜色变化(小圆点)-->

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

                    <label>保密</label>

                    <input type="radio" disabled name="gen" id="" value="" />

                </div>

            </form>

            </div>

            <h5 class="mui-content-padded">圆点居左mui-left</h5>

            <form class="mui-input-group">

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

                <label>小学生</label>

                <input type="radio" name="leibie" class="mui-radio"/>

            </div>

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

                <label>中学生</label>

                <input type="radio" name="leibie" class="mui-radio"/>

            </div>

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

                <label>高学生</label>

                <input type="radio" name="leibie" class="mui-radio"/>

            </div>

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

                <label>大学生</label>

                <input type="radio" name="leibie" class="mui-radio"/>

            </div>

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

                <label>保密</label>

                <input type="radio" name="leibie" class="mui-radio " disabled/>

            </div>

            </form>

             <h5 class="mui-content-padded">请选择你的学历(单选)</h5>

            <div class="mui-card">

                <ul class="mui-table-view mui-table-view-chevron">

                    <!--

                        mui-table-view-cell：内容页相当于item

                    -->

                    <li class="mui-table-view-cell">

                        <a class=" mui-navigate-right">大专</a>

                    </li>

                    <li class="mui-table-view-cell">

                        <a class=" mui-navigate-right">本科</a>

                    </li>

                    <li class="mui-table-view-cell">

                        <a class=" mui-navigate-right">研究生</a>

                    </li>

                </ul>

            </div>

             <h5 class="mui-content-padded">请选择你的学历(单选)</h5>

            <div class="mui-card">

                <ul class="mui-table-view mui-table-view-radio" id="edu">

                    <!--

                        mui-table-view-cell：内容页相当于item

                    -->

                    <li class="mui-table-view-cell">

                        <a class=" mui-navigate-right">大专</a>

                    </li>

                    <li class="mui-table-view-cell">

                        <a class=" mui-navigate-right">本科</a>

                    </li>

                    <li class="mui-table-view-cell">

                        <a class=" mui-navigate-right">研究生</a>

                    </li>

                </ul>

            </div>

            <p id="tishi" class="mui-content-padded mui-text-center">你当前选择的是</p>

            <!--

                多选复选框

            -->

             <h5 class="mui-content-padded">多选复选框</h5>

            <form class="mui-input-group">

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

                <label>JAVE</label>

                <input type="checkbox" name="jn" class="mui-checkbox"/>

            </div>

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

                <label>Web开发</label>

                <input type="checkbox" name="jn" class="mui-checkbox" checked/>

            </div>

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

                <label>Python开发</label>

                <input type="checkbox" name="jn" class="mui-checkbox" checked/>

            </div>

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

                <label>人工智能</label>

                <input type="checkbox" name="jn" class="mui-checkbox"/>

            </div>

            <!--重点：mui-disabled、disabled-->

             <div class="mui-input-row mui-checkbox mui-left mui-disabled">

                <label>保密</label>

                <input type="checkbox" name="jn" class="mui-checkbox" disabled/>

            </div>

            </form>

        </div>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init()

            var tishi=document.getElementById('tishi')

            document.getElementById('edu').addEventListener('selected',function(e){

                console.log(e.detail.el.innerText)

                var value=e.detail.el.innerText

                tishi.innerText='你的学历为'+value

                //弹框提示

                mui.toast('你的学历为'+value,{duration:'short'})

            });

        </script>

    </body>

</html>

mui单选和多选框的更多相关文章

  1. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  2. php一些单选、复选框的默认选择方法（示例）

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  3. Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  4. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  5. MFC_2.1使用单选和多选框

    使用单选和多选框 单选 1.拖控件 设置名字,CTRL+D设置顺序,属性设置第一个GROUP为TRUE: 2.设置第一个按钮绑定变量为 值 INT型 名称m_RadioIndxe; 3.设置单击响应内 ...

  6. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. selenium+Python（定位 单选、复选框，多层定位）

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

  8. android 中单选和复选框监听操作

    单选按钮RadioGroup.复选框CheckBox都有OnCheckedChangeListener事件,我们一起了解一下. package com.genwoxue.oncheckedchange ...

  9. js单选和复选框

    http://blog.csdn.net/chelen_jak/article/details/44827393 http://www.gbtags.com/technology/jquerynews ...

随机推荐

  1. 利用nginx进行集群部署

    现在一般的服务器都是集群的情况了,所以准备搞集群部署下. nginx用的是第三方的openrestynginx.首先安装nginx,我的系统是UBuntu,安装方法也很简单,见官网. 自己采用了默认安 ...

  2. [luogu2292][L语言]

    题目链接 思路 这道题我用的是AC自动机的做法. 先把子串挂到trie树上,在单词结尾打标记的时候,标记的是当前单词的长度.然后去上面查询母串的时候,每查询到一个单词,就建立一条线段,这条线段的结尾位 ...

  3. react-native中的请求数据

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个 REST API 发起 POST 请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容. 使用 Fetch React ...

  4. Echarts CPU监控 （折线仪表盘，图例混搭）

    https://blog.csdn.net/mengxiangfeiyang/article/details/44802939 CPU page   <script type="tex ...

  5. linux系统调用之系统控制

    ioctl I/O总控制函数 _sysctl 读/写系统参数 acct 启用或禁止进程记账 getrlimit 获取系统资源上限 setrlimit 设置系统资源上限 getrusage 获取系统资源 ...

  6. POJ 2553 The Bottom of a Graph (Tarjan）

    The Bottom of a Graph Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 11981   Accepted: ...

  7. (二叉树 BFS) leetcode103. Binary Tree Zigzag Level Order Traversal

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  8. MySQL会发生死锁吗？

    SHOW ENGINE INNODB STATUS;来查看死锁日志: SHOW PROCESSLIST;查看进程 MySQL的InnoDB引擎事务有4种隔离级别,主要是为了保证数据的一致性. Inno ...

  9. Linux记录-文件格式

    yum -y install dos2unix dos2unix filename

  10. ubuntu14.04 mysql数据库允许远程访问设置

    安装mysql5.5 sudo apt-get install mysql-server-5.5 --------------------------------------------------- ...