【第22期】观点:IT 行业加班,到底有没有价值?

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

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

相关文章推荐

HTML中select标签单选多选详解

select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 表单数据提交给服务器时包括 name 属性。 ...

HTML复选框,默认打勾

html中复选框Checkbox 设置默认选中代码注意:checked=”checked”表示默认选中状态。

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

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

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

html中的简单实例演示(checkbox)的使用

演示一个小小的例子:在购物车里面,我们能够勾选自己所选的商品,然后能够显示出相应的价格。 1,首先显示出相应的界面: 相关代码: 商品列表: 笔记本电脑3000   台式...

html复选框全选

function selectAll(){ var checklist = document.getElementsByName ("selected"); if(document.getEl...

HTML 复选框 checkbox 的 JavaScript 的全选和全反选

checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: Insert title here 序号 选择 ...
  • joyous
  • joyous
  • 2013-09-30 11:16
  • 29073

html的单选框与复选框

使用语法:1、当 type=”radio” 时,控件为单选框;当 type=”checkbox” 时,控件为复选框2、value:提交数据到服务器的值(给后台程序PHP使用)3、name:为控件命名,...

入门HTML之复选框 单选框 下拉列表

复选框(Checkbox)  在一个表单里的所有多选框可以有一个或多个被选中。 复选框 请选择您喜欢的音乐: 摇滚 爵士 流行 单选框(RadioButton)...

HTML中的单选框和复选框及其选择

http://blog.163.com/sky20081816@126/blog/static/164761023201052532729217/ 单选,但是要注意此时需要把对象的name 属性设置...

HTML表单,文本框,密码框,单选框,复选框,提交

表单的作用是收集用户输入的数据,可以提供实现和服务器进行交互。包含文本框,密码框,单选框,复选框等 下面是表单讲解 类型:type="text"   type="password" 密码...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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