javascript实现checkbox复选框全选和反选功能

我心飞翔 分类:实例代码

复选框的全选和反选功能在实际应用中非常普遍,常见于对于文件的批量操作。

本章节就分享一段使用原生javascript实现的此功能,需要的朋友可以做一下参考。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
window.onload = function () {
  var obtn1 = document.getElementById('btn1');
  var obtn2 = document.getElementById('btn2');
  var obtn3 = document.getElementById('btn3');
  var odiv = document.getElementById('div1');
  var ocheck = odiv.getElementsByTagName('input');
  //全选
  obtn1.onclick = function () {                                
    for (var index = 0; index < ocheck.length; index++) {
      ocheck[index].checked = true;
    }
  };
  //不选
  obtn2.onclick = function () {                                
    for (var index = 0; index < ocheck.length; index++) {
      ocheck[index].checked = false;
    }
  };
  //反选
  obtn3.onclick = function () {                             
    for (var index = 0; index < ocheck.length; index++) {
      ocheck[index].checked = !ocheck[index].checked;
    }
  };
}
</script>
</head>
<body>
<input type="button" id="btn1" value="全选" />
<input type="button" id="btn2" value="不选" />
<input type="button" id="btn3" value="反选" />
<div id="div1">
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
</div>
</body>
</html>

javascript实现checkbox复选框全选和反选功能,这样的场景在实际项目中还是用的比较多的,关于javascript实现checkbox复选框全选和反选功能就介绍到这了。

javascript实现checkbox复选框全选和反选功能属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容