這篇文章主要為大家詳細介紹了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模組如何實作封裝