具体见代码：

<!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. HTML学习笔记Day13

    一.HTML+CSS代码实现三角形 (一)transparent透明属性实现代码编写三角 <!DOCTYPE html> <html> <head> <met ...

  2. 将分支代码合并到master和将master代码合并到dev

    两种合并分支的方法: 都保证在合到的那个分支上面:A合并到B,即保证当前在B分支上. A merge B是把A中的改动放到B分支上,B merge A是把B中的改动merge到A中,例如把master ...

  3. Go结构体

    当我们要表示同一种数据类型时候,可以用到数组,切片和字典. 当我们要表示不同的数据类型呢?这时候就要用到结构体了 一:定义struct 关键字 type 和 struct 来定义结构体 type st ...

  4. 关于Tcpdump抓包总结

    一.简介 tcpdump是一个用于截取网络分组,并输出分组内容的工具.凭借强大的功能和灵活的截取策略,使其成为类UNIX系统下用于网络分析和问题排查的首选工具 tcpdump提供了源代码,公开了接口, ...

  5. CodeForces922E DP//多重背包的二进制优化

    https://cn.vjudge.net/problem/1365218/origin 题意 一条直线上有n棵树 每棵树上有ci只鸟 在一棵树底下召唤一只鸟的魔法代价是costi 每召唤一只鸟,魔法 ...

  6. Java集合、Iterator迭代器和增强for循环整理

    集合 集合,集合是java中提供的一种容器,可以用来存储多个数据. 数组的长度是固定的.集合的长度是可变的.集合中存储的元素必须是引用类型数据 1.1      ArrayList集合存储元素 pac ...

  7. CSS-With-BEM

    Naming rules block_name__element_name--modifier_name-modifier_value Names are written in lowercase L ...

  8. PHPMYWIND4.6.6前台Refer头注入+后台另类getshell分析

    下载链接 https://share.weiyun.com/b060b59eaa564d729a9347a580b7e4f2 Refer头注入 全局过滤函数如下 function _RunMagicQ ...

  9. golang json序列化

    结构体序列化 func main() { var j = js{ Name: "zhangsan", Age: 16, Sal: 1500.3, Intro: "aiha ...

  10. HDU - 4578 Transformation（线段树区间修改）

    https://cn.vjudge.net/problem/HDU-4578 题意 4种操作,区间加,区间乘,区间变为一个数,求区间的和.平方和以及立方和. 分析 明显线段树,不过很麻烦..看kuan ...