具体见代码：

<!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. 洛谷P2486 染色

    LCT的一种姿势. 题意:给定一棵树.每次把一条路径上的点染成一种颜色,求一条路径上有多少段颜色. 解: 首先可以很轻易的用树剖解决,只不过代码量让人望而却步... 有一种难以想象的LCT做法... ...

  2. 洛谷P4169 天使玩偶 CDQ分治

    还是照着CDQ的思路来. 但是有一些改动: 要求4个方向的,但是可爱的CDQ分治只能求在自己一个角落方向上的.怎么办?旋转!做4次就好了. 统计的不是和,而是——max!理由如下: 设当前点是(x,y ...

  3. 洛谷P3723 礼物

    以前看到过,但是搞不倒.知道了算法之后就好搞了. 题意:给定两个长为n的序列,你可以把某个序列全部加上某个数c,变成循环同构序列. 求你操作后的min∑(ai - bi)² 解: 设加上的数为c,那么 ...

  4. ZOJ 1532 Internship （Dinic）

    看来模板又错了,敲你妈妈小饼干 #include<iostream> #include<queue> #include<cstring> #include<c ...

  5. Elastic 开发篇 javaAPI（4）

    1.解决精确匹配问题,如果不加配置,搜索农大,会搜出“农”“大”这两个字的匹配,我们要的是“农大”,那么好了,加上一个条件搞定: MatchQuery.Type.PHRASE 完整代码: packag ...

  6. mysql 5.7 启动脚本

    最近这段时间,在看mysql,安装了,也应用过,对于生产环境中,一般都选择使用source code安装,在安装的时候可以自定义相关路径和内容,对于生产环境来说更有效.相对于mysql 5.5的安装, ...

  7. 异常处理和Throwable中的几个方法

    package cn.lijun.demo; /* * try { //需要被检测的语句. } catch(异常类 变量) { //参数. //异常的处理语句. } finally { //一定会被执 ...

  8. 微信小程序：import导入公共文件方式

    wxss: @import "../common/ali_icon.wxss"; wxml: 公共文件(位置:../common/head.wxml)如下---- <temp ...

  9. oracle中的insert all into，在mysql中的写法

    oracle中的insert all into表示插入多条数据,mysql中可以采用: INSERT INTO表名(字段1,字段2..) values <foreach collection=& ...

  10. javascript实现全选，全不选，反选

    利用input的checked属性来实现:checked值为true,表示被选择,否则反之. 效果如图: js代码: <script> var butt1 = document.getEl ...