来源:蔡诗奔个人博客(http://www.caishiben.com)
本文全文转载需购买版权(1¥),摘要引流则免费,具体参见这里
摘要:在本文中,我通过javascript实现全选、反选和单选列表中的CheckBox,这里将给出如何实现这个目标的想法。 该文章提供在线展示及代码下载。
该文章所实现的效果如下:
在线展示请点击这里,下载请点击这里。
实现思路:
数据列表里需每行有唯一的编号,并将该编号绑定到每行对应CheckBox的Id属性中;
当全选CheckBox为选中时,则选中所有子项CheckBox并将所有子项编号存储在input(存储过的不再存储);
当全选CheckBox为不选时,则不选所有子项CheckBox并将存储在input值全部删除;
当子项某个选中时,则将当前编号存储在input,如选中子项总数与列表总数相同,则全选CheckBox为选中;
当子项某个不选时,则将当前编号存储在input值删除,如全选CheckBox为选中,则变为不选;
所用代码:
列表数据CSS结构:
<style> body{text-align:center} .data-list{width:300px;margin:0 auto;text-align:left} .data-list thead td{line-height:30px;font-weight:700;border-bottom:solid 1px #999} .data-list tbody td{line-height:20px;border-bottom:solid 1px #eee} </style>
列表数据HTML结构:
<div class="data-list"> <table cellspacing="0"> <thead> <tr> <td style="width: 80px;"> <input id="cboxHeader" type="checkbox" onclick="javascript: HeaderClick(this);" /><label for="cboxHeader">全选</label></td> <td style="width: 100px;">名称</td> </tr> </thead> <tbody id="data_list"></tbody> </table> <input id="SelectedValues" style="display: block;" type="text" /> </div>
JavaScript变量声明及初始:
var targetControl = document.getElementById('data_list'), totalCheckBoxs = 10, // 数据列表条数 totalChecked = 0, // 选中子项条数 selectedItems = new Array(), // 选中子项编号 selectedValues = document.getElementById("SelectedValues"), // 存储选中子项编号 html = ""; // 生成数据列表HTML
生成数据列表:
// 生成数据列表HTML for (var i = 0; i < totalCheckBoxs; i++) { html += '<tr><td>' + '<input id="cboxItem_' + i + '" onclick="javascript:ChildClick(this, document.getElementById(\'cboxHeader\'), ' + i + ');" type="checkbox" />' + '</td><td>文本内容' + i + '</td></tr>'; } targetControl.innerHTML = html;
点击“全选”触发的事件:
// 点击全选 function HeaderClick(CheckBox) { if (targetControl == null) { return; } var Inputs = targetControl.getElementsByTagName('input'); for (var n = 0; n < Inputs.length; n++) { if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('cboxItem', 0) >= 0 && !Inputs[n].disabled) { Inputs[n].checked = CheckBox.checked; var strId = Inputs[n].id; var strNO = strId.substring(strId.indexOf('_') + 1, strId.length); if (CheckBox.checked) { if (IsItemExists(strNO) == -1) { selectedItems.push(strNO); } } else { DeleteItem(strNO); } } } selectedValues.value = selectedItems.join('|'); totalChecked = CheckBox.checked ? totalCheckBoxs : 0; };
点击子项触发的事件:
// 点击子项 function ChildClick(CheckBox, HCheckBox, Id) { if (CheckBox.checked && totalChecked < totalCheckBoxs) { totalChecked++; } else { totalChecked--; } if (totalChecked < totalCheckBoxs) { HCheckBox.checked = false; } else { HCheckBox.checked = true; } if (CheckBox.checked) { selectedItems.push(Id); } else { DeleteItem(Id); } selectedValues.value = selectedItems.join('|'); };
同时还需要一个“删除存储”的方法和一个“判断编号是否已存储”的方法,代码如下:
// 删除存储 function DeleteItem(text) { var i = IsItemExists(text); if (i > -1) { selectedItems.splice(i, 1); } }; // 判断编号是否已存存储 function IsItemExists(text) { for (var i = 0; i < selectedItems.length; i++) { if (selectedItems[i] == text) { return i; } } return -1; };
总结:
看过javascript实现全选、反选和单选列表中的CheckBox代码,你会发现实现起来是件很容易的事情。另外,将这种全选方式应用到项目时,还需要考虑到页面是否已经加载完成。
上一篇:博思节能技术有限公司网站建设
下一篇:在线静态页面----港联企业网站
相关文章
标签:javascript, checkbox, 全选