HTML5-复选框

来源：互联网发布：百分百营销软件流量编辑：程序博客网时间：2024/04/25 02:50

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

0 0