jquery radio check, form:checkbox 체크하기 :: 개발/일상_Mr.lee

jquery radio check, form:checkbox 체크하기

Posted by Mr.mandu.
2018. 3. 23. 17:11 개발/javascript,jquery

안녕하세요.

스프링에서 

<from:checkbox path ~~ 이런식의 태그 많이 쓰시죠?

저는 여기에 jquery ui 를 사용하고 있습니다.


오늘 제가 직면한 문제는

이러한 체크박스들을 jquery를 이용하여 check 표시를 하려고하는데

체크가 안된다는 사실!!!



일반 적인 체크 박스라면


전체 선택을 눌렀을때


$("선택자").attr('checked', true);

를 사용하면 체크 표시가 이루어집니다.


하지만 현재 상황에서는 체크되었다는 표시가 안된다는 사실!

처음에 어리둥절 하였습니다.

엄청난 삽질 끝에...


브라우저 디버깅으로 차이점을 찾고자 하였습니다.



11월(선택하지 않은 것)




12월(선택된 것)



jquery Ui를 썼기때문에

check 박스 주면에 label이 붙으면서 버튼형 처럼 보여지고있습니다.


그리고 중요한 차이점!


aria-pressed 속성과

calss 에서 ui-state-active 가 있었습니다.





이에 스크립트를 구현하였습니다.


$('input:checkbox[name=estm_month_arr]').each(function(index, element){
							$(this).next('label').addClass("ui-state-active");
							$(this).next('label').attr('aria-pressed', true);
							$(this).attr('checked', true);
						});


전체 선택을 눌렀을때 돌아가는 스크립트 입니다.

앞서 말씀드렸듯이


jquery ui 의 속성을 제어하여 눌려진 표시를 해야하기 때문에

addClass를 이용하여 ui-state-active 를 추가하였습니다.

해제할 경우에는 removeClass를 이용하면 됩니다.


그리고 aria-pressed 속성을 true, flase 값을 주었고,


form:checkbox도 일반 체크박스의 속성을 가지고 있기때문에

일반적인 속성 checked 속성을 주었습니다.


그 결과 form:checkbox에 jquery ui를 입혔을때 제어가 가능하게 되었습니다.

감사합니다.