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代码

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

web前端开发jqeury之checkbox选中与取消

全选/取消 $('button').click(function(){ /*第一次有效果,后面再点击就没效果了 if($(this).hasClass('check-all')){ ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

自定义复选框、单选按钮外观方法。支持IE、Firefox、chrome

当UI拿给你的设计稿中的复选框或单选按钮的外观与默认的外观出入很大,更漂亮,色彩更艳丽,是否会嘴角一抽,一筹莫展。不怕!在这里,你将找到完美的解决方法。...
  • as1200
  • as1200
  • 2016年05月11日 10:06
  • 3694

Html5与Css3表单、文本框、复选框、image新增属性(八)

css5新增的元素与属性表单内元素的属性 1. form属性 之前必须书写在表单内部。而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定...

HTML5-复选框

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

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

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

HTML5文本域,单选框、复选框,下拉列表框,提交、重置按钮的设置,label标签

文本域,支持多行文本输入 当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法:   rows="行数"cols="列数">文本 1、标签是成对出现的,以开始,以结束。 ...

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

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

html,删除复选框选中的内容

首先是选中复选框,可以自己单击一个个的选,这个就不用多说了吧!也可以批量操作,如全选,主要是设置复选框的.checked值。...
  • i_yjn
  • i_yjn
  • 2015年06月21日 17:01
  • 2139
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5-复选框
举报原因:
原因补充:

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