Analysis of checkbox selection problem based on jQuery

The example of this article analyzes the checkbox selection problem based on jQuery. Share it with everyone for your reference, the details are as follows:

I encountered a very strange problem recently when developing a project, that is, whether to select all or not select all in the checkbox
Using the jQuery framework. I have always used

//检测选中的checkbox
$('input[name="abc"]:checked').each(function(){})

However, I found that when I need to select all, I use

$('input[name="abc"]').attr('checked',true);
$('input[name="abc"]').attr('checked',false);

. It works when loading for the first time. Clicking it again will only show itself
But when I click When I checked the source code, I found that the checked attribute had been added. I was puzzled. Finally, I found out that it was the attr attribute. For checked, it would not change the dom style, but would only change its attribute value. jquery provided The alternative method is as follows

$('input[name="abc"]').prop('checked',true);
$('input[name="abc"]').prop('checked',false);

However, the problem comes again. When not selecting all, I can’t detect which element is clicked, and then I make a fuss about the name

$('input[name="abc[]:checked"').each(function(i){});
//或者
$('input[name="abc[]"').each(function(i){
  var flag = $(this).prop('checked');
  if(flag){
   //$(this) 即为选中元素
 }
})

problem solved.