这篇文章主要为大家详细介绍了JavaScript实现全选取消效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js实现全选取消效果的具体代码,供大家参考,具体内容如下 Title .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; } 选择 主机名 端口 1.1.1.1 90 1.1.1.2 91 1.1.1.3 92 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; } } } 登录后复制效果如下: 点击全选反选取消就是相应的效果: 上面是我整理给大家的,希望今后会对大家有帮助。 相关文章: webpack对样式该如何处理? 在js中如何实现二级联动 在Javascript中如何实现bind 在nodejs中基于mssql模块如何实现封装