具体见代码：

<!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. HDU/HDOJ 4864 Task

    贪心题. 贪心方法很是naive...... 首先我们就能注意到一个性质:优先选择时间(x)长的,然后才是等级(y). 所以我们把机器和任务排好序,从大到小枚举任务.对于每一个x满足的机器,x也一定满 ...

  2. 【CF600E】Lomsat gelral

    题目大意:给定一棵 N 个节点的有根树,1 号节点是树的根节点,每个节点有一个颜色.求对于每个节点来说,能够支配整棵子树的颜色之和是多少.支配的定义为对于以 i 为根的子树,该颜色出现的次数不小于任何 ...

  3. 【洛谷P4145】花神游历各国

    题目大意:给定一个长度为 N 的序列,支持区间开根,区间求和. 题解:对于区间开根操作,可以发现任何一个位置的值开根至多 6 次就会变成 1.因此即使是整个区间开根,暴力修改6次后,所有的点的权值均小 ...

  4. Win32-API: 终于能正常的捕获焦点事件: WM_COMMAND、BN_SETFOCUS、EN_SETFOCUS

    学习和使用win32-api来写窗口程序算算也有二三年了. 以前有个需求,想捕获控件的焦点事件(SETFOCUS. KILLFOCUS),我一直认为应该捕获 WM_SETFOCUS 和 WM_KILL ...

  5. canvas简易画板

    代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 第十三节，卷积神经网络之经典网络LeNet-5、AlexNet、VGG-16、ResNet(三)(后面附有一些网络英文翻译文章链接)

    一 实例探索 上一节我们介绍了卷积神经网络的基本构建,比如卷积层.池化层以及全连接层这些组件.事实上,过去几年计算机视觉研究中的大量研究都集中在如何把这些基本构件组合起来,形成有效的卷积神经网络.最直 ...

  7. Unity 着色过程

    图形API包括:OpenGL.Metal.Vulkan.Director3D. 渲染管线(图形管线)通用结构: 1.数据收集(图形的网格.纹理.材质)--------2.顶点着色器(获取图形的2D坐标 ...

  8. Luogu P4015 运输问题

    题目链接 \(Click\) \(Here\) 继续颓网络流\(hhhhh\),虽然这次写的是个大水题,但是早上水一个网络流果然还是让人心情舒畅啊- 最大费用最大流不用非得反着费用建边．只要没有正环, ...

  9. qml: 自定义滚动条；

    注:  该博文为原创博文,转载请注明,摘用请随意: qml自带的滚动条不太好用: 首先,利用canvas绘制滚动条两端的箭头: import QtQuick 2.0 Canvas { width: 2 ...

  10. UEFI BIOS Rootkit Analysis

    catalog . BIOS简介 . UEFI BIOS . EFI编程简介 . UEFI Rootkit 1. BIOS简介 BIOS("Basic Input Output System ...