设计/代码
来源：蔡诗奔个人博客（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, 全选
