HTML5-复选框

原创 2016年08月29日 14:10:26

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

10个HTML5美化版复选框和单选框

转自:http://www.html5tricks.com/10-pretty-checkbox-radiobox.html 单选框Radiobox和复选框checkbox在网页中也十分常见,虽然...

HTML5-复选框

遇到个很尴尬的事情,从网上找的复选框,都有效果,然而在我自己的项目中却没有效果,对复选框的操作十分的不灵敏,网上也没什么可以解释的博客,这种事情也只有我犯这么二的问题,标签放到了不该放的位置,应该放在...

HTML5_放大镜-全选框--一级菜单-二级菜单

1、全选按钮 每个选项被选了之后全选键要自动打勾。 方法一:用for循环 方法二:用bool值 2、 显示当鼠标移过时图片会消失,解决方法一如下。 clearTimeo...

html 复选框样式

树形菜单复选框级联选择HTML

树形菜单复选框级联选择,对应的HTML文档: 模块标题 ...

HTML复选框checkbox默认样式修改

此方法可以将复选框的默认样式替换成任意样式。如图: 未选择:选择时:思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框。代码如下: checkbox css c...

最简洁的HTML JS树形带复选框

最简洁的HTML JS树形带复选框,点大类自动选中子类. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题文档...
  • cncco
  • cncco
  • 2013-05-07 11:05
  • 6300

.html(),.text()和.val()的使用,获取单选和复选框选中的值

本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法。jQuery中 ...

HTML页面中复选框的小操作

复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影。接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助。 第一个是关于复选框全选反选的操...

html自定义复选框

自定义复选框的素材: icon-check-circle.png icon-checked.png checkbox.html(为了方便起见,这里使用到了jQuery) 自定...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)