JQuery implements checkbox, that is, click to modify batch deletion and the pitfalls encountered in the middle. jquerycheckbox
Recently, you have to use jQuery to implement a batch delete operation. The effect is shown in figure
The final page page.html, which uses bootstrap and jQuery. If you do not need to download
<! DOCTYPE html>
Two operations are required:
1. When the checkBox is clicked, the selected count (with pitfalls) is displayed ).
2. When you click batch Delete, splice the id of the selected unit and pass it to the backend.
At first glance, I feel that these are well implemented and there are many implementation methods. I thought so at the beginning. The result was a morning ...... let's look at some pitfalls of jQuery.
I started to think that every time I click the checkBox, I perform each () traversal on all the checkboxes. If I select the check box, I will use Num ++, finally, assign the value of num to the small numeric tag for batch deletion, and splice the id.
$(".check_0").click(function(){ var num=0; var del_str=""; $(".check_0").each(function(){ alert($(this).val()+":"+$(this).attr("checked")); if($(this).attr("checked")=="checked"){ num++; del_str+=$(this).parent().siblings("show_id").html()+"/"; } alert(this.checked); }) })
When this code is triggered, it finds a strange phenomenon: this code will be triggered before the effects are checked. Similar to beforeClick (), the current check status cannot be obtained when the code is passed.
In this case, I have been searching for answers online for half a day, but I do not know how to solve the problem. All the mouseup () operations are performed by beforeClick.
Finally, I used another method.
// Obtain the selected number $ (". check_0 "). click (function () {$ ("# badge_0" ).html ($ ("input [type = checkbox]: checked "). length); // alert ($ ("input [type = checkbox]: checked "). length) ;}) // batch Delete $ ("# batchDel "). click (function () {var params = ""; $ ("input [type = checkbox]: checked "). each (function (index, element) {// The first id does not need to be prefixed with if (index = 0) {params + = "id =" + $ (this ). val ();} else {params + = "& id =" + $ (this ). val () ;}}); alert ("generated merging parameter:" + params );})
The result is successfully run!
Conclusion:
Used in click ()input[type=[checkbox]:checked]
When the selector obtains the selected element, the result afterclick () is obtained ().
When you use. each (), the effect beforeclick is obtained.
Why can beforeclick and aferclick be obtained in a click function?
Crying ......
Summary
The above is a small series of jQuery implementation checkbox, that is, to change the batch count and the pitfalls encountered in the middle, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in time!