checkbox 초기화하기 본문
checkbox 초기화하기
- 2022. 10. 25. 15:03
반응형
모바일에서의 햄버거 메뉴를 구현 하는 중, 다른 페이지로 이동했다가 모바일에서 뒤로 가기를 하면
햄버거 메뉴가 자동적으로 열리는 오류가 있었습니다.
페이지가 이동하면서 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
반응형
'프로그램 > 추가 팁' 카테고리의 다른 글
| 윈도우에서 대용량 텍스트 파일 분할 저장 (with. 파워쉘) (0) | 2023.09.15 |
|---|---|
| notepad++ 에서 정규식을 이용하여 일괄 변경 (0) | 2022.11.21 |
| 아파치 웹서버에 SSL인증서 설치(With Apache2.4) (0) | 2021.02.16 |
| Apache 2.4 + Tomcat 7 연동 (0) | 2021.02.14 |
| 티스토리에서 코드 문법 강조 (Syntax Highlight) (0) | 2021.02.05 |
프로그램/추가 팁 Related Articles
-
윈도우에서 대용량 텍스트 파일 분할 저장 (with. 파워쉘)
-
notepad++ 에서 정규식을 이용하여 일괄 변경
-
아파치 웹서버에 SSL인증서 설치(With Apache2.4)
-
Apache 2.4 + Tomcat 7 연동
RECENT COMMENT