javascript在列表全选、反选和单选 CheckBox

该文章发布于 2016年10月11日 03:18,星期二,by 何朝君,归档于 js/jQuery。阅读483次,今日1次 扫码阅读 javascript在列表全选、反选和单.. javascript在列表全选、反选和单选 CheckBox

摘要:在本文中,我通过javascript实现全选、反选和单选列表中的CheckBox,这里将给出如何实现这个目标的想法。 该文章提供在线展示及代码下载。


该文章所实现的效果如下:

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, 全选

发表评论(目前0条评论)

名称
邮箱
网址
×意见反馈
标题
名称
邮箱
电话
公司
网址