mui單選和多選框

時間  2019-12-02
標籤 mui 單選 简体版
原文   原文鏈接

具體見代碼：javascript

<!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>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程