具体见代码：

<!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. 【洛谷P2568】GCD

    题目大意:给定整数 \(N\),求\(1\le x,y\le N\) 且 \(gcd(x,y)\) 为素数的数对 \((x,y)\) 有多少对. 题解: \[ \sum_{p \in \text { ...

  2. JavaScript（JS）基本语法（一）

    https://www.cnblogs.com/haiyan123/p/7577598.html 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入 ...

  3. 第二十六篇-单击事件、Toast（提示框信息）

    单击事件有3种方法: 第一种: layout.xml <?xml version="1.0" encoding="utf-8"?> <Line ...

  4. Overloaded Fuction 调用——到底使用的是谁的函数

    #include <stdio.h> class Base{ public: int a(){ ; } }; class Inherit:public Base{ public: int ...

  5. WPF开发的界面调用C++生成的dll文件

    以引用d1.dll为例. [生成d1.dll] 文件——新建——项目——Visual C++——Win32项目,选择DLL,点击Finish.在d1.cpp中添加代码 #include "s ...

  6. HDU5542 BIT优化dp

    http://acm.hdu.edu.cn/showproblem.php?pid=5542 题意:求严格递增的长度为M的序列的组数. 当dp的优化方案不那么容易一眼看出来的时候,我们可以考虑先写一个 ...

  7. jmeter打开图形化界面时指定代理

    \apache-jmeter-4.0\bin>jmeter -Dhttp.proxyHost=127.0.0.1 -Dhttp.proxyPort=8888 如果不想在每个请求里面指定代理的话可 ...

  8. 虚拟机centos无法连接外网时怎么处理

    1. 首先查看service 如果没有启动请启动这2个服务. 2. 在虚拟机那重启网络端口 ifdown ens33 ifup ens33

  9. Scrapy框架的执行流程解析

    这里主要介绍七个大类Command->CrawlerProcess->Crawler->ExecutionEngine->sceduler另外还有两个类:Request和Htt ...

  10. C++ 对象实例化（转）

    C++ 对象实例化的一些概念: C++ 如果直接定义类,如classA  a; a存在栈上(也意味着复制了对象a在栈中):如果classA  a = new classA就存在堆中. 一.new创建类 ...