JQuery implements all-selected invert selection and deletion operations on the checkbox,

JQuery implements all-selected invert selection and deletion operations on the checkbox,

1.list.html

Note: Use the checkbox array Check [] to store the ID values of each row

1 <div id = "con"> 2 <table width = "100%" cellspacing = "1" cellpadding = "0"> 3 <tr> 4 <th> <input id = "CheckAll" name = 'checkall' type = 'checkbox'> </th> 5 <th> ID </th> 6 <th> Name </th> 7 <th> date </th> 8 </tr> 9 <tr> 10 <td> <input id = 'check [] 'name = 'check [] 'Type = 'checkbox' value = "1"> </td> 11 <td> 10001 </td> 12 <td> XXX </td> 13 <td> 2015-12-01 </td> 14 </tr> 15 <tr> 16 <td> <input id = 'check [] 'name = 'check [] 'Type = 'checkbox' value = "2"> </td> 17 <td> 10002 </td> 18 <td> XXX </td> 19 <td> 2015-12-02 </td> 20 </tr> 21 <tr> 22 <td> <input id = 'check [] 'name = 'check [] 'Type = 'checkbox' value = "3"> </td> 23 <td> 10003 </td> 24 <td> XXX </td> 25 <td> 2015-12-03 </td> 26 </tr> 27 </table> 28 <div id = "bottom"> 29 <input id = "Delete" name = "Delete" type = "button" value = "Delete" class = "btn-danger radius"/> 30 </div> 31 </ div>

2. function: select all or do not select all

NOTE: If needed, you can also display/hide the delete button Based on the selected result.

1 // select all/select none $2 ("# CheckAll "). bind ("click", function () {3 $ ("input [name = 'check [] ']"). prop ("checked", this. checked); 4 // display the delete button 5/* if (this. checked = true) {6 $ ("input [name = 'delete'" detail .css ("display", 'block '); 7} else {8 $ ("input [name = 'delete'" ).css ("display", 'None'); 9} */10 });

3. function: Batch Delete

Note: When passing values, convert the obtained array checkData to the string checkData. toString ()

1 // batch Delete 2 $ ("# Delete"). click (function () {3 if (confirm ('Are you sure you want to Delete the selected? ') {4 var checks = $ ("input [name = 'check []']: checked"); 5 if (checks. length = 0) {alert ('no items are selected! '); Return false;} 6 // Save the obtained value to the Array 7 var checkData = new Array (); 8 checks. each (function () {9 checkData. push ($ (this ). val (); 10}); 11 $. get ("<{spUrl c = order a = delete}>", {Check: checkData. toString ()}, function (result) {if (result = true) {window. location. reload () ;}}); 12} 13} 14 });

In actual applications, there is usually not only one batch delete operation, but also another batch operation. We can optimize and integrate the above Code to put common functions in one file.

Common File: jquery. ready. js

Note: This part is more common and can be placed in a common js file. To obtain the checkbox value, you can write it as a variable function.

1 // obtain the selected checkbox value 2 var checked = function () {3 var checks = $ ("input [name = 'check [] ']: checked "); 4 if (checks. length = 0) {alert ('no items are selected! '); Return false;} 5 6 var checkData = new Array (); 7 checks. each (function () {8 checkData. push ($ (this ). val (); 9}); 10 return checkData; 11}; 12 13 // select all/select none 14 $ ("# CheckAll "). bind ("click", function () {15 $ ("input [name = 'check [] ']"). prop ("checked", this. checked); 16 // display the delete button 17/* if (this. checked = true) {18 $ ("input [name = 'delete'" detail .css ("display", 'block '); 19} else {20 $ ("input [name = 'delete'" ).css ("display", 'None'); 21} */22 });

List. js

1 // batch Delete 2 $ ("# Delete "). click (function () {3 if (val = checked () {4 if (confirm ('Are you sure you want to delete the selected? ') {5 $. get ("<{spUrl c = order a = delete}>", {Check: val. toString ()}, function (result) {if (result = true) {window. location. reload () ;}}); 6} 7} 8 });
// Batch operation...