关于动态创建input checkbox的应用
2016-11-04 16:50
393 查看
业务场景:
为列表加上复选框,选中的则将值填充到一个文本框,最多允许填充10个.列表为动态创建的,可翻页.代码实现:
1.对复选框的操作
// 复选框 var checkbox = document.createElement("input"); checkbox.setAttribute("type", "checkbox"); checkbox.setAttribute("name", "kk"); checkbox.setAttribute("value", item.showtext); node.appendChild(checkbox); // 翻页时,如果被选中的,则自动勾选 var kdids = $("#kdbh").val(); if(kdids.indexOf(item.id)!=-1){ checkbox.checked = true; } checkbox.onclick = function() { var checked = this.checked; // 如果当前操作为选中,并且已选择的卡口数达到了10则取消当前选择 if(countkk == 10 && checked){ alert("最多只能选择10个卡口,您已选择了10个卡口!"); this.checked = false; return; }else{ var gate = { "id" : item.id, "name" : item.showtext } fillInput(gate,checked); } }
2.选中内容填充到文本框
var countkk = 0; // 已选择的卡口个数 // 将选中的卡口填充到文本框,以及将取消选中的卡口从文本框去除 function fillInput(node,checked) { var kdids = $("#kdbh").val(); var fxids = $("#fxbh").val(); var names = $("#kdmc").val(); var kdmap = kdids.split(","); var fxmap = fxids.split(","); var namemap = names.split(","); if(checked){ // 选中则填充到input中 if (node.id.length == 12) { kdmap.push(node.id); namemap.push(node.name); } if (node.id.length == 13) { fxmap.push(node.id); namemap.push(node.name); } }else{ // 取消选择则从input中去掉 if (node.id.length == 12) { cancleKk(kdmap,node.id); cancleKk(namemap,node.name); } if (node.id.length == 13) { cancleKk(fxmap,node.id); cancleKk(namemap,node.name); } } countkk = kdmap.length-1; $("#kdbh").val(kdmap.join(",")); $("#fxbh").val(fxmap.join(",")); $("#kdmc").val(namemap.join(",")); $("#kkcount").val(countkk); } function cancleKk(kdArray,node){ $.each(kdArray,function(index,item){ if(item == node){ kdArray.splice(index,1); } }); } function doclear(){ window.opener.document.getElementById("${v1}").value = ''; window.opener.document.getElementById("${v2}").value = ''; if(window.opener.document.getElementById("${v3}")){ window.opener.document.getElementById("${v3}").value = ''; $("#fxbh").val(''); } countkk = 0; $("#kdmc").val(''); $("#kdbh").val(''); $("#kkcount").val(countkk); $('input:checkbox').removeAttr('checked'); }
分析:
1.如何确定已选择的个数?
我首先想到的是直接得到指定name的所有选中的checkbox,从而得到个数.可以使用如下代码,在IE7,IE8和IE9兼容模式,IE9标准模式中也能正常使用var selectChks = $("input[type=checkbox][name=kk]:checked"); var count = selectChks.length;这样,我只需要在点击复选框之后就可以得到已选择的个数了.然而问题来了.当翻页之后,前面选择的就丢失了.这个时候.我们是不是要解决翻页丢失问题呢?好吧,先来说下在翻页丢失选中的情况下如何获取已选择的个数.
既然选中丢失,那么使用checkbox选中的个数就 不准确了,我们直接定义一个全局变量,来存放文本框中填充的个数,点击checkbox时判断如果达到10,并且为选中操作时,则取消并返回.
2.翻页之后,怎么解决丢失的情况?
将选中的存起来,翻页时,去对比,如果存在,则设置选中.注意点:
1.动态创建input checkbox时,如何添加click事件,如何设置默认选中?
这两种使用setAttribute都是无效,添加click事件要在appendChild方法之后使用obj.onclick = function(){},默认选中要在appendChild方法之后使用obj.checked=true;2.splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
具体用法参见http://www.w3school.com.cn/jsref/jsref_splice.asp相关文章推荐
- document.createElement("input")动态创建html元素时checkbox和radio默认选中的问题
- 在C#中应用javascript创建POP动态信息提示。
- ExtAspNet应用技巧(五) - 动态创建工具栏菜单
- 关于对象数组的应用(创建一个学生信息采集系统)
- 关于动态创建控件性能提高 以及 SuspendLayout & ResumeLayout 的使用
- 在Web应用中动态创建PDF文件
- 关于动态创建控件的Demo
- android关于每次点击图标进入应用后都会重新创建启动页的问题
- 关于android创建快捷方式会启动两个应用的问题(一)
- 关于mysql存储过程创建动态表名及参数处理
- Ext.Net中CheckboxSelectionModel的动态隐藏(显示),一定条件下的隐藏(不让选择),获得多选栏位的信息,及后台控件的动态创建
- wp8.1 创建动态磁贴应用
- C#入门学习-----菜单应用(添加剂快捷方式、设置菜单项是否可用、修改菜单字体、创建级联菜单、级联菜单的动态合并)
- HTML中关于动态创建的标签无法绑定js事件的解决方法
- 关于.NET动态代理的介绍和应用简介
- MFC中关于运行时类信息及动态创建对象的两个宏的意义
- 关于用存储过程中动态创建视图的一点心得。
- Android学习札记40:关于安全退出已创建多个Activity的应用(3)
- [转]关于ASP.NET(C#)程序中TEXTBOX下动态DIV跟随[AJAX应用]
- 关于TClientDataSet创建动态表的问题