<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverseAll()"> <input type="button" value="取消" onclick="cancelAll()"> <table border="1"> <thead> <tr> <th>选项</th> <th>ip</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>2.2.2.2</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>3.3.3.3</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true) } function reverseAll() { $('#tb :checkbox').each(function (k) { console.log(k,this) // 用dom的方法做判断 // if (this.checked){ // this.checked = false; // }else { // this.checked = true; // } // 用jquery的方法做判断 // if($(this).prop('checked')){ // $(this).prop('checked',false); // }else { // $(this).prop('checked',true) // } // 用三元运算的方法做判断 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v) }) } function cancelAll() { $('#tb :checkbox').prop('checked',false) } </script> </body> </html>
py17_07：jquery实现全选，反选，取消功能的小案例
猜你喜欢
转载自www.cnblogs.com/yeyu1314/p/12671307.html
今日推荐
周排行