HTML5-复选框

最新推荐文章于 2024-05-28 16:17:33 发布

Janine1

最新推荐文章于 2024-05-28 16:17:33 发布

阅读量6.7k

点赞数

分类专栏： Web前端文章标签： html5

本文链接：https://blog.csdn.net/yes_or_no_tina/article/details/52352652

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

遇到个很尴尬的事情，从网上找的复选框，都有效果，然而在我自己的项目中却没有效果，对复选框的操作十分的不灵敏，网上也没什么可以解释的博客，这种事情也只有我犯这么二的问题，标签放到了不该放的位置，应该放在哪个位置呢？
下面是基于HTML5的MUI框架代码段：

<!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></title>
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">checkbox’ demo</h1>
        </header>
        <div class="mui-content">
            <h5 class="mui-content-padded">多选题：你的爱好是什么？</h5>
            <div class="mui-card" style="margin-top: 10px;">
                <form class="mui-input-group">
                    <div class="mui-input-row mui-checkbox" style="height: 50%;margin-top: 10px;">
                        <label>
                            <p>球类</p>
                            <p>篮球</p>
                        </label>
                        <input name="checkbox1" value="Item 1" type="checkbox">
                    </div>
                    <div class="mui-input-row mui-checkbox" style="height: 50%;margin-top: 10px;">
                        <label>
                            <p>文艺类</p>
                            <p>小说</p>
                        </label>
                        <input name="checkbox2" value="Item 2" type="checkbox">
                    </div>
                    <div class="mui-input-row mui-checkbox" style="height: 50%;margin-top: 10px;">
                        <label>
                            <p>生活</p>
                            <p>睡觉、吃</p>
                        </label>
                        <input name="checkbox3" value="Item 3" type="checkbox">
                    </div>
                    <div class="mui-input-row mui-checkbox mui-disabled">
                        <label>disabled checkbox</label>
                        <input name="checkbox4" type="checkbox" disabled="disabled">
                    </div>
                </form>
            </div>
            <div align="center" style="margin: 12px 12px;">
                <button id="sure" type="button" class="mui-btn mui-btn-blue mui-btn-block" style="font-size: 100%;">确定</button>
            </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="UTF-8">
                mui.init();
                var sureButton;
                mui.plusReady(function() {
                    // Janine:获取确认按钮
                    sureButton = document.getElementById("sure");
                    // Janine:确定按钮的点击事件
                    sureButton.addEventListener('tap', function() {
                        // Janine:获取input标签中的checkbox
                        var chks = document.getElementsByTagName('input');
                        var bl = true;
                        // 定义数组存放相关信息
                        var checkpass = new Array();  
                        // 获取复选框的长度，一共有几个复选框   
                        var length = chks.length - 1;   
                        for(var i = 0; i <= length; i++) {
                            // Janine:判断复选框是否被选上
                            if(chks[i].checked) {
                                bl = false;
                                checkpass[i] = {
                                    name: "null",
                                };
                                checkpass[i].name =chks[i].previousElementSibling.innerText;
                                mui.alert(checkpass[i].name);
                        }
                    }
                    if(bl) {
                        mui.alert('最少选择一条信息');
                    } 
                });
            });         
        </script>
    </body>
</html>

js代码

Janine1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-复选框

遇到个很尴尬的事情，从网上找的复选框，都有效果，然而在我自己的项目中却没有效果，对复选框的操作十分的不灵敏，网上也没什么可以解释的博客，这种事情也只有我犯这么二的问题，标签放到了不该放的位置，应该放在哪个位置呢？下面是基于HTML5的MUI框架代码段：<!DOCTYPE html><html> <head> <meta charset="UTF-8">
复制链接

扫一扫