Maison >interface Web >js tutoriel >Comment obtenir l'effet sélectionner tout annuler en JavaScript
Cet article présente principalement JavaScript pour implémenter l'effet select-all-cancel en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
L'exemple dans cet article partage avec vous l'implémentation js de. select-all. Le code spécifique pour annuler l'effet est pour votre référence. Le contenu spécifique est le suivant
<!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;"> <p> <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> </p> <!--遮罩层开始--> <p id="i1" class="c1 hide"></p> <!--遮罩层结束--> <!--弹出框开始--> <p 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> </p> <!--弹出框结束--> <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>
L'effet est le suivant :
<.>Cliquez sur Sélectionner tout et Inverser la sélection Annuler pour obtenir l'effet correspondant : J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir. Articles connexes :Comment Webpack doit-il gérer les styles ?
Comment implémenter un lien secondaire en js
Comment implémenter la liaison en Javascript
Comment pour implémenter l'encapsulation basée sur le module mssql dans nodejs
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!