javascript實現checkbox核取方塊全選和反選功能

admin發表於2017-04-12
JavaScript

核取方塊的全選和反選功能在實際應用中非常普遍，常見於對於檔案的批量操作。

本章節就分享一段使用原生javascript實現的此功能，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>


相關文章