Home > Article > Web Front-end > jQuery menu select all, invert selection, cancel instance analysis
Regarding the functions of selecting all, inverting selection, and canceling in jQuery menu, the functions of selecting all, inverting selection, and canceling are very common. In this article, the editor will bring you an example of jQuery menu (selecting all, inverting selection, canceling). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
No more nonsense, let’s go directly to the code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverseAll()"> <input type="button" value="取消" onclick="cancleAll()"> <table border="1"> <thead> <tr> <th>选择</th> <th>IP</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script type="text/javascript" src='jquery-3.2.1.js'></script> <script type="text/javascript"> function checkAll(){ $(':checkbox').prop('checked',true); } function cancleAll() { $(':checkbox').prop('checked',false); } function reverseAll(){ $(':checkbox').each(function(){ var v = $(this).prop('checked')? false:true; /*三元运算: var v = 条件? 真值:假值*/ $(this).prop('checked',v) }) } </script> </body> </html>
Related recommendations:
About the solution to the compatibility issue between Chrome and jQuery menu
Use jquery menu plug-in HoverTree to imitate Jingdong unlimited menu_jquery
##jQuery menu plug-in usage example_jquery
The above is the detailed content of jQuery menu select all, invert selection, cancel instance analysis. For more information, please follow other related articles on the PHP Chinese website!