ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で全選択キャンセル効果を実現する方法
この記事では主に、全選択のキャンセル効果を実現するための JavaScript について詳しく紹介します。興味のある方は参考にしてください。
この記事のサンプルでは、選択を実現するための具体的なコードを紹介します。 -all-cancel エフェクト。参考までに、具体的な内容は次のとおりです
<!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>
エフェクトは次のとおりです:
クリックしてすべてを選択し、選択を反転してキャンセルします。これは、対応するエフェクトです:
上記は皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。
関連記事:
Webpack はスタイルをどのように処理する必要がありますか?
nodejsでmssqlモジュールに基づいてカプセル化を実装する方法
以上がJavaScript で全選択キャンセル効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。