本文主要包含hbuilder webapp,hbuilder开发webapp,html5 webapp,html5 webapp开发,hbuilder mui等相关知识,教程希望在学习及工作中可以帮助到您
");
</div>
在做公司项目的时候，有一个页面有个个数不定的勾选框checkbox视图区，每个勾选框对应一个ID和NAME的值，我们需要把选中的chexkbox的ID获取到，然后以拼接成字符串，字符中间用“,”分割。在这个需求里面有三个点，1：不定选项的checkbox; 2:获取选中的checkbox的ID; 3:字符串中间使用“,”拼接。
关于上面的三个知识点来说,个人任我最难的是第2个，难点在在使用H5做的时候我还不知道js的时间绑定中的这种方法，我们虽说是要获取选中的checkbox的ID,实际这些需要在checkbox的点击时间里面去处理。以前做原生的时候是在button的点击事件里面处理的，每个button的tag值我们可以设置为0~n,然后根据tag值从数据源数组里面去取数据。但是在H5里面去不能这样处理，使用下面的事件绑定方法：
- 1
- 1
这个事件绑定的方式有个特点就是需要知道每个checkbox的id,然后一个id有一个事件绑定方法。显然这么做是难以接受的，因为checkbox的个数不定。
还有一点就是,保存选中checkbox的ID,再加上每个checkbox都存在多次点击的时候,这个时候就需要在存储ID的容器里面处理选中的时候存储的是ID,非选中的时候存储的不是ID。想到每个ID的唯一性和字典里面key的唯一性,下面的就好做了。每一个checkbox对应字典里面的一个键值对,key是ID,选中时的value是ID，非选中的时候value不是ID(这里我们假定为是“X”);然后在checkbox点击事件里面，当checkbox被选中时，设置其对应的键值对的value为对应的ID，否则设置为“X”。
这里还是没有说到这篇博客的重点，事件绑定。其实这也是这么一个功能点,我认为对我来说我需要学习的一个知识点,所以我叫他事件绑定。
js事件绑定
《JavaScript事件绑定》
《Javascript事件绑定的几种方式》
关于JavaScript的事件绑定，可以看看上面两篇文章。但在实际使用中我们需要多看看mui提供的方式，因为平台和环境不一样。
代码
- <html>
- <head>
- <meta charset="utf-8">
- <title>Hello MUI</title>
- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <!--标准mui.css-->
- <link rel="stylesheet" href="../css/mui.min.css">
- <link rel="stylesheet" href="../css/mui.css" />
- <!--App自定义的css-->
- <style type="text/css">
- .mui-checkbox{
- height: 44px;
- background: white;