009-跨平台开发-MUI-复选框及取值（checkbox）

最新推荐文章于 2024-05-11 22:47:01 发布

_枸杞子_

最新推荐文章于 2024-05-11 22:47:01 发布

阅读量2.8k

点赞数

分类专栏： MUI_教程版文章标签：跨平台 mui框架

本文链接：https://blog.csdn.net/qq_33605778/article/details/78448220

版权

MUI_教程版专栏收录该内容

10 篇文章 0 订阅

订阅专栏

视频教程：点击这里

认识

checkbox常用于多选的情况，比如批量删除、添加群聊等；

微信公众号：JavaWeb架构师

DOM结构

<div class="mui-input-row mui-checkbox">
  <label>checkbox示例</label>
  <input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

<div class="mui-input-row mui-checkbox mui-left">

若要禁用checkbox，只需在checkbox上增加disabled属性即可；

<input name="checkbox1" value="C++" type="checkbox" disabled="disabled" />

若需要默认选中，只需在checkbox上增加checked属性即可；

<input name="checkbox1" value="Java" type="checkbox" checked="checked" />

激活代码块

mckeckbox

测试代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>复选框（checkbox）</title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">
            mui.init();

            // 获取复选框的值
            function getCheckBoxValues() {
                var ele = document.getElementsByName("checkbox");
                for (var i = 0; i < ele.length; i++) {
                    mui.alert(ele[i].value + ": " + ele[i].checked)
                }
            }

            mui.ready(function() {
                document.getElementById('getValueBtn').addEventListener('tap',function () {
                        getCheckBoxValues();
                })
            })

        </script>

        <style type="text/css">

        </style>
    </head>


    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">复选框（checkbox）</h1>
        </header>

        <div class="mui-content">
            <!-- 复选框的结构 -->
            <!-- 默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可 -->
            <div class="mui-input-row mui-checkbox mui-left">
                <!-- 显示内容 -->
                <label>MUI</label>
                <!-- 选择的圆形框 -->
                <input name="checkbox" value="MUI" type="checkbox" checked="checked" />
            </div>

            <div class="mui-input-row mui-checkbox mui-left">
                <label>Java</label>
                <!-- checked属性被默认选中 -->
                <input name="checkbox" value="Java" type="checkbox" checked="checked" />
            </div>

            <div class="mui-input-row mui-checkbox mui-left">
                <label>C++</label>
                <!-- disabled属性，禁用该复选框 -->
                <input name="checkbox" value="C++" type="checkbox" disabled="disabled" />
            </div>

            <!-- 代码块激活字符: mckeckbox -->

            <button type="button" class="mui-btn mui-btn-danger" id="getValueBtn" >获取值</button>
        </div>

    </body>

</html>

效果

微信公众号：JavaWeb架构师

视频教程：点击这里

源码下载

关注下方的微信公众号，回复：mui_course.code

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载

_枸杞子_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
009-跨平台开发-MUI-复选框及取值（checkbox）

视频教程：点击这里认识checkbox常用于多选的情况，比如批量删除、添加群聊等；DOM结构<div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Item 1" type="checkbox" checked></div>默认checkbox在
复制链接

扫一扫