jQuery 기반 체크박스 선택 문제 분석

본 글에서는 jQuery를 기반으로 체크박스 선택 문제를 예시로 분석합니다. 참고하실 수 있도록 공유해 드리며 자세한 내용은 다음과 같습니다.

최근 프로젝트를 개발할 때 체크박스를 모두 선택하거나 모두 선택하지 않는 등 매우 이상한 문제에 직면했습니다.
jQuery 프레임워크를 사용합니다. 저는 항상

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

을 사용했는데, 모두 선택해야 한다고 판단되면

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

은 처음 로드할 때 작동합니다. 다시 클릭하면 해당 내용만 표시됩니다.

그러나 클릭하여 소스 코드를 보면 확인된 속성이 추가되었습니다
의아해하고 마침내 검색해 보니 selected의 attr 속성은 dom 스타일을 변경하지 않고 해당 속성 값만 변경하는 것으로 나타났습니다.

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

그런데 문제가 또 발생합니다. 모두 선택하지 않으면 어떤 요소가 클릭되었는지 감지할 수 없고 이름에 대해 호들갑을 떨게 됩니다.

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

문제가 해결되었습니다.