최근 프로젝트 개발 요구에 부응하여 전체 선택 체크박스 기능을 만들어야 합니다.
앗~~ 이거 엄청 간단한거 아닌가요? 일반 체크박스도 있고 하위 체크박스도 N개 있는데 일반 체크박스는 한번 선택하면 하위 체크박스는 다 선택되더라구요. 선택하면 하위 확인란이 선택되지 않습니다.
이런 작은 부탁을 받고 은근히 기뻤습니다. 참 간단한 기능이군요. 2분이면 끝납니다~~
시간이 1분 1초씩 흐르고 마음이 뿌듯해졌습니다. 경주하는 말의 수가 점차 수천만 마리로 늘어났어요~~~
대체 무슨 일이 일어나고 있는 걸까요?
alert($("#checkbox_all").attr("checked"))
항상 정의되지 않았나요?
나니요? ? ?
왜 이런 일이 일어나는 걸까요? ? 브라우저야, 너 바보야? 그런 다음 테스트용 브라우저를 Chrome에서 IE로, IE에서 Firefox로 과감하게 변경합니다. 결과는 이렇습니다 -_-||
jquery가 또 개선되었기 때문일까요? ? ? ?
벤 디아오시(Ben Diaosi)는 허블 망원경과 고화질 레이저 전자현미경을 이용해 확인한 끝에 마침내 단서를 찾았습니다. . . .
jquery 버전 1.6에서 수정된 것으로 밝혀졌습니다.
[checked 속성은 페이지 초기화 시 초기화되었으며 상태에 따라 변경되지 않습니다.
즉, 페이지가 로드된 후 확인란을 선택하면 반환된 값이 항상 확인됩니다(처음에는 내 항목이 선택되지 않았습니다).
선택하지 않은 경우 시작 부분은 항상 정의되지 않은 상태로 반환됩니다! ]
jquery가 이를 변경했으므로 이에 상응하는 더 나은 솔루션이 있어야 합니다.
.prop()는 이 문제를 해결하는 강력한 도구입니다!
구체적인 사용법은 다음과 같습니다:
alert($("#checkbox_all").prop("checked"));
는 다음에서 true가 됩니다. 이번에는 아니면 거짓~~
그래서 이 diaosi의 코드는 다음과 같이 변경되었습니다.
#check_all은 모든 선택에 대한 전체 체크박스, #check_children은 하위 체크박스