javascript (14) 썸네일형 리스트형 [javascript] 체크박스 전체 체크 및 해제 pure javascript로 전체 체크박스 기능 구현하는 방법을 알려드리겠습니다. 일단 기능은 1. all 체크박스 클릭시 하위 체크박스 체크 및 해제 2. 하위 체크박스 클릭시 전부 체크상태면 all 체크박스 체크 3. 하위 체크박스 클릭시 하나라도 해제 상태면 all 체크박스 해제 html All agree agree1 agree2 javascript function allCheck(e) { // 전체 체크 버튼 클릭시 전체 체크 및 해제 if(e.target.checked) { document.querySelectorAll(".check_all_list").forEach(function(v, i) { v.checked = true; }); } else { document.querySelectorA.. input type="file" 디자인 파일 첨부 기능을 가진 input type="file" 은 브라우저마다 스타일 다르고 기본적으로 가지고 있는 스타일을 변경하는게 힘듭니다. 그렇기 때문에 기존 input 태그는 숨기고 label 태그의 for 속성을 이용해서 디자인을 할 수 있습니다. 파일 업로드 스타일 변경 html css .file_box{ position:relative; margin-top:30px; font-size:0; } .file_box input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .file_box label { d.. 체크박스 전체 체크 html 전체 남성 여성 javascript /* 체크박스 올 체크 on off */ function check_all(thisobj) { var $this = $(thisobj); if($this.prop("checked") == true) { $this.closest(".check_list").find("input[type=checkbox]").prop("checked", true); } else { $this.closest(".check_list").find("input[type=checkbox]").prop("checked", false); } } /* 체크박스 리스트 체크시 all 체크박스 on off */ function select_list(thisobj) { var $this = $(thi.. [javascript] media query 감지 window.matchMedia 사용 if(window.matchMedia("(max-width: 900px)").matches == true) { // 900px 이하일 경우 원하는 코드 } (max-width: 900px) 부분에 원하는 px을 입력하면 해당 px 이하일 경우 적용이 된다. [javascript] 모바일 가로 화면 감지 모바일 가로화면 감지 orientationchange 사용 window.addEventListener("orientationchange", function() { if(window.orientation == -90 || window.orientation == 90) { //가로화면일 때 } else { //세로화면일 때 } }, false); window.orientation 값이 0일 경우는 세로화면이고 90일 경우와 -90일 경우가 각각 오른쪽 가로화면, 왼쪽 가로화면 입니다. if 문 안에 가로화면일 때 원하는 코드를 넣으면 됩니다. 초기 실행시 orientation 감지 document.addEventListener("DOMContentLoaded", function(){ if(window.ori.. [javascript] mobile 레이어 팝업 시 스크롤 막기 팝업 열때 $("html, body").css({"overflow":"hidden", "height":"100%"}); $("#pop").bind("touchmove", function(e) { e.preventDefault(); }); $("#pop .popIn").bind("touchmove", function(e) { e.stopPropagation(); }); 1. html과 body 높이를 100%로 설정하고 오버되는 부분은 없앤다. 2. 팝업 최상단 부모의 터치를 금지시키고 3. 팝업 컨텐츠 부분에서 터치 이벤트가 확산되는걸 방지 이렇게 하면 레이어 팝업에서 배경 레이어 부분은 터치 이벤트가 안되고 가운데 컨텐츠 부분은 터치 이벤트가 작동한다. 팝업 닫을 때 $("html, body").css.. [javascript] 팝업창 종료 감지 팝업 관련 작업을 하다가 팝업창 종료 시점을 감지해야 할 경우가 있는데 아래 코드와 같이 작성하게 되면 종료 시점을 감지해 코드 실행이 가능합니다. var uri = '팝업창 경로; var popupName = '팝업 창 이름'; var options = '팝업 옵션'; var openDialog = function(uri, name, options, closeCallback) { var win = window.open(uri, name, options); var interval = window.setInterval(function() { try { if (win == null || win.closed) { window.clearInterval(interval); closeCallback(win); } .. [jquery] 유동적인 테이블 셀 병합 - rowspan 위와 같이 주문번호가 같을 시에 고객명, 주문번호, 주문총액의 row를 합쳐주는 스크립트입니다. var table = []; var table_count = 1; var k = 0; $("#eTable tbody").find("tr").each(function(i,v) { table.push($(v).find("td:nth-child(2)").text()); }) for(var i=0; i 이전 1 2 다음