JavaScript實現全選取消效果

2019-11-19 14:44:03

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了js實現全選取消效果的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide {  display: none; } .c1 {  position: fixed;  left: 0;  top: 0;  bottom: 0;  right: 0;  background-color: black;  opacity: 0.6;  z-index: 9; } .c2 {  width: 500px;  height: 400px;  background-color: white;  position: fixed;  left: 50%;  top: 50%;  margin-left: -250px;  margin-top: -300px;  z-index: 10; } </style></head><body style="margin: 0;"><div> <input type="button" value="添加" onclick="ShowModel();"/> <input type="button" value="全選" onclick="ChooseAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反選" onclick="ReverseAll();"/> <table> <thead> <tr>  <th>選擇</th>  <th>主機名</th>  <th>端口</th> </tr> </thead> <tbody id="tb"> <tr>  <td><input type="checkbox"/></td>  <td>1.1.1.1</td>  <td>90</td> </tr> <tr>  <td><input type="checkbox"/></td>  <td>1.1.1.2</td>  <td>91</td> </tr> <tr>  <td><input type="checkbox"/></td>  <td>1.1.1.3</td>  <td>92</td> </tr> </tbody> </table></div><!--遮罩層開始--><div id="i1" class="c1 hide"></div><!--遮罩層結束--><!--彈出框開始--><div id="i2" class="c2 hide"> <p><input type="text"/></p> <p><input type="text"/></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="確定"/> </p></div><!--彈出框結束--><script> function ShowModel() { document.getElementById("i1").classList.remove("hide"); document.getElementById("i2").classList.remove("hide"); } function HideModel() { document.getElementById("i1").classList.add("hide"); document.getElementById("i2").classList.add("hide"); } function ChooseAll() { var tbody = document.getElementById("tb"); var tb_list = tbody.children; for (var i = 0; i < tb_list.length; i++) {  var current_tr = tb_list[i];  var checkbox = current_tr.children[0].children[0];  checkbox.checked = true; } } function CancelAll() { var tbody = document.getElementById("tb"); var tb_list = tbody.children; for (var i = 0; i < tb_list.length; i++) {  var current_tr = tb_list[i];  var checkbox = current_tr.children[0].children[0];  checkbox.checked = false; } } function ReverseAll() { var tbody = document.getElementById("tb"); var tb_list = tbody.children; for (var i = 0; i < tb_list.length; i++) {  var current_tr = tb_list[i];  var checkbox = current_tr.children[0].children[0];  if(checkbox.checked){  checkbox.checked = false;  }else{  checkbox.checked = true;  } } }</script></body></html>

效果如下：