checkbox 초기화하기 본문

프로그램/추가 팁

checkbox 초기화하기

반응형

모바일에서의 햄버거 메뉴를 구현 하는 중, 다른 페이지로 이동했다가 모바일에서 뒤로 가기를 하면

햄버거 메뉴가 자동적으로 열리는 오류가 있었습니다.

페이지가 이동하면서 checkbox에 checked가 초기화되지 않고 자동적으로 checked되었기 때문에 발생한 오류였는데요. 

checked를 풀기 위해서는 페이지가 열릴 때마다 checkbox를 초기화하는 작업이 필요했습니다. 

꽤 여러 삽질을 거쳤는데요;; 제 경우는 아래 세 경우를 모두 적용하고 나서야 해당 오류에서 벗어날 수 있었습니다.

 

1/ 별도 js 스크립트에서 초기화 내용 넣기

window.onpageshow = function(event) {
    if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
	var chk = $("#menu__toggle").is(":checked");
	if(chk) {$("#menu__toggle").prop("checked", false).attr("checked", false).removeAttr("checked");}
    }
};

 

2/ index.html에 넣기 (jquery 사용)

<script>
function uncheck(){
	$(':checkbox:checked').prop('checked',false);
};
</script>
<body onLoad="uncheck()">

 

3/ autocomplete="off"를 넣기

<input type="checkbox" autocomplete="off">

 

* 첫번째 방법 참고 사이트 : https://dev-t-blog.tistory.com/9 , http://amabile29.blog.me/221548195341

* 두번째 방법 참고 사이트 : https://itbloger.tistory.com/1019

* 세번쨰 방법 참고 사이트 : http://triki.net/prgm/126

* 햄버거 메뉴 참고 사이트 : https://codepen.io/andreykrokhin/pen/mGEqja

반응형

프로그램/추가 팁 Related Articles

MORE

Comments