코딩 노트
jQuery02 - checkbox, 화면분할 본문
체크박스
체크박스의 이벤트는 셋 중에 하나를 걸면 된다.
change를 추천한다.
$(".ck").on("input", function(){});
$(".ck").on("change", function(){});
$(".ck").change(function(){});
jquery에서는 태그의 정보를 읽을 때 두 가지 명령이 있다.
- .prop()은 자바스크립트에서 관리하는 태그의 정보를 읽는다.
- .attr()은 태그에 써 있는 글자를 읽는다.
- 원래 태그에 존재하는 속성은 prop(), 아니면 attr()을 사용
ex) prop() - placeholder, attr() - dataset
console.log($(this).prop("checked"));
console.log($(this).attr("checked"));
체크 여부에 따라 비밀번호가 표시되도록 처리
if($(this).prop("checked")) {
$("[name=memberPw]").prop("type", "text");
}
else {
$("[name=memberPw]").prop("type", "password");
}
});
});
위처럼 type(속성)이 써 있을 때는 attr()로 표시해도 되지만, 이미 존재하는 속성일 때는 prop을 쓰는 것이 맞다.
37.checkbox.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체크박스</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- Javascript 작성 공간 -->
<script>
$(function(){
$(".ck").change(function(){
//this == 체크박스
// console.log(tshis.checked); //js
console.log($(this).prop("checked"));
console.log($(this).attr("checked"));
//체크 여부에 따라 비밀번호가 표시되도록 처리
if($(this).prop("checked")) {
$("[name=memberPw]").prop("type", "text");
}
else {
$("[name=memberPw]").prop("type", "password");
}
});
$(".btn").click(function(){
// $(".check-item").prop("checked", true); 전체선택
// $(".check-item").prop("checked", false); //전체해제
//체크 상태를 반대로 하고 싶다면?
//일괄처리가 아니기 때문에 반복이 필요하다.
$(".check-item").each(function(index, element){
//여기서 this는 현재 시점, 현재 회차의 체크박스가 된다.
// console.log(this);
// console.log(elementl);
//현재 체크 상태의 반대로 넣어라
//js
// this.checked = !this.checked;
//jQuery
var checked = $(this).prop("checked");
$(this).prop("checked", !checked);
});
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>체크박스 제어</h1>
</div>
<div class="row left">
<input type ="checkbox" class="ck"> 비밀번호 표시
</div>
<div class="row left">
<input type ="password" name="memberPw" class="form-input w-100">
</div>
<div class="row left">
<button type="button" class="btn">전체선택</button>
</div>
<div class="row left">
<input type="checkbox" class="check-item">
<input type="checkbox" class="check-item">
<input type="checkbox" class="check-item">
<input type="checkbox" class="check-item">
<input type="checkbox" class="check-item">
</div>
</div>
</body>
</html>
38.policy.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이용약관</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function(){
//전체선택과 개별체크박스에 대한 이벤트 구현
$(".check-all").change(function(){
var check = $(this).prop("checked");
$('.check-all, .check-item').prop("checked", check);
});
//개별체크박스
$(".check-item").change(function(){
// var allCheck = 개별 체크박스 개수 == 체크된 개별 체크박스 개수;
// var allCheck = $(".check-item").length == $(".check-item:checked").length; //css활용
var allCheck = $(".check-item").length == $(".check-item").filter(":checked").length; //제이쿼리 filter 사용
$(".check-all").prop("checked",allCheck);
});
});
</script>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>이용약관</h1>
</div>
<div class="row left">
<label>
<input type="checkbox" class="check-all"> 모두 동의합니다
</label>
</div>
<div class="row left">
<textarea class="form-input w-100" readonly>dummy text</textarea>
</div>
<div class="row left">
<label>
<input type="checkbox" class="check-item"> 동의합니다
</label>
</div>
<div class="row left">
<textarea class="form-input w-100" readonly>dummy text</textarea>
</div>
<div class="row left">
<label>
<input type="checkbox" class="check-item"> 동의합니다
</label>
</div>
<div class="row left">
<textarea class="form-input w-100" readonly>dummy text</textarea>
</div>
<div class="row left">
<label>
<input type="checkbox" class="check-item"> 동의합니다
</label>
</div>
<div class="row left">
<textarea class="form-input w-100" readonly>dummy text</textarea>
</div>
<div class="row left">
<label>
<input type="checkbox" class="check-item"> 동의합니다
</label>
</div>
<hr>
<div class="row left">
<label>
<input type="checkbox" class="check-all"> 모두 동의합니다
</label>
</div>
<div class="row">
<button class="btn btn-positive w-100" disabled
id="next-btn">다음 단계로 이동</button>
</div>
</div>
</body>
</html>
39.multi-page.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멀티 페이지</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
.page {
display: none;
}
.page.active {
display: block;
}
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function(){
//[1] active 클래스를 활용하는 방식
//- 최초에 이전버튼을 숨김
refreshButton();
//- 다음버튼(.btn-next)을 누르면 active를 뒷 page로 이동
$(".btn-next").click(function(){
$(".page.active").removeClass("active").next().addClass("active");
refreshButton();
});
//- 이전버튼(.btn-prev)을 누르면 active를 앞 page로 이동
$(".btn-prev").click(function(){
$(".page.active").removeClass("active").prev().addClass("active");
refreshButton();
});
function refreshButton() {
var pageList = $(".page");
//if(맨앞페이지에 active클래스가 있다면) {
if(pageList.first().hasClass("active")){
$(".btn-prev").hide();
$(".btn-next").show();
}
//else if(맨뒷페이지에 active클래스가 있다면) {
else if(pageList.last().hasClass("active")) {
$(".btn-prev").show();
$(".btn-next").hide();
}
else {
$(".btn-prev").show();
$(".btn-next").show();
}
}
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>멀티 페이지</h1>
</div>
<div class="row page-wrapper">
<div class="page active">1페이지</div>
<div class="page">2페이지</div>
<div class="page">3페이지</div>
<div class="page">4페이지</div>
<div class="page">5페이지</div>
</div>
<div class="row">
<button class="btn btn-prev">이전</button>
<button class="btn btn-next">다음</button>
</div>
</div>
</body>
</html>
39-1.multi-page.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 실습</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- Javascript 작성 공간 -->
<script>
$(function(){
//페이지에 버튼이 포함되어 있으므로 DOM탐색으로 처리
//[1] 첫페이지만 빼고 다 숨김
$(".page").hide().first().show(); //ac페이지 숨기고 처음만 보여주세요
$(".btn-prev").first().remove();
$(".btn-next").last().remove();
//[2] 다음 버튼을 누르면 버튼이 속한 페이지를 숨기고 뒷 페이지 표시
$(".btn-next").click(function(){
$(this).parent(".page").hide().next(".page").show(); //지금 버튼을 숨기고 다음 버튼을 보여주세요
});
//[3] 이전 버튼을 누르면 버튼이 속한 페이지를 숨기고 앞 페이지 표시
$(".btn-prev").click(function(){
$(this).parent(".page").hide().prev(".page").show();
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>멀티 페이지</h1>
</div>
<div class="row page-wrapper">
<div class="page">
1페이지
<button class ="btn btn-prev">이전</button>
<button class ="btn btn-next">다음</button>
</div>
<div class="page">
2페이지
<button class ="btn btn-prev">이전</button>
<button class ="btn btn-next">다음</button>
</div>
<div class="page">
3페이지
<button class ="btn btn-prev">이전</button>
<button class ="btn btn-next">다음</button>
</div>
<div class="page">
4페이지
<button class ="btn btn-prev">이전</button>
<button class ="btn btn-next">다음</button>
</div>
<div class="page">
5페이지
<button class ="btn btn-prev">이전</button>
<button class ="btn btn-next">다음</button>
</div>
</div>
</div>
</body>
</html>
40.join.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 실습</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*
진행바 디자인
*/
.progressbar {
width: 100%;
height: 5px;
}
.progressbar > .guage {
width: 0%;
height: 100%;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
transition: width 0.1s ease-out;
}
</style>
<!-- jquery cdn -->
<script src="multipage.js"></script>
<script src="join.js"></script>
<!-- javascript 작성 공간 -->
<script>
$(function(){
//최초 게이지 계산
refreshProgressbar();
//이전이나 다음버튼을 누르면 진행상황을 파악하여 게이지 계산
$(".btn-prev, .btn-next").click(function(){
refreshProgressbar();
});
function refreshProgressbar() {
//page중에 보여지는 태그를 찾아서 계산
//- 전체 페이지 수 + 보여지는 페이지 번호
var count = 0;
var index = 0;
$(".page").each(function(idx, el){
//if(현재 태그가 표시중이라면) {
if($(this).is(":visible")) {
index = idx+1;
}
count++;
});
var percent = index * 100 / count;
$(".progressbar > .guage").css("width", percent+"%");
}
//페이지 이탈 방지
//- window에 beforeunload 이벤트 설정
$(window).on("beforeunload", function(){
return false;
});
});
</script>
</head>
<body>
<form class="join-form" action="" method="post" autocomplete="off">
<div class="container w-600">
<div class="row">
<h1>회원 정보 입력</h1>
</div>
<!-- 전체 진행단계를 알 수 있는 게이지 출력 -->
<div class="row">
<div class="progressbar">
<div class="guage"></div>
</div>
</div>
<!-- 1단계 : 아이디+비밀번호+확인 -->
<div class="row page">
<div class="row">
<h2>1단계 : 아이디/비밀번호</h2>
</div>
<div class="row left">
<label>아이디 <i class="fa-solid fa-asterisk red"></i></label>
<input type="text" name="memberId" placeholder="영문 소문자, 숫자 5~20자"
class="form-input w-100">
<div class="success-feedback">멋진 아이디입니다!</div>
<div class="fail-feedback">아이디를 형식에 맞게 입력하세요</div>
<div class="fail2-feedback">이미 사용중인 아이디입니다</div>
</div>
<div class="row left">
<label>비밀번호 <i class="fa-solid fa-asterisk red"></i></label>
<input type="password" name="memberPw"
placeholder="영문,숫자,특수문자 반드시 1개 이상 포함"
class="form-input w-100">
<div class="success-feedback">올바른 비밀번호 형식입니다</div>
<div class="fail-feedback">잘못된 비밀번호 형식입니다</div>
</div>
<div class="row left">
<label>비밀번호 확인 <i class="fa-solid fa-asterisk red"></i></label>
<input type="password" id="password-check"
placeholder="비밀번호 한 번 더 입력" class="form-input w-100">
<div class="success-feedback">비밀번호가 일치합니다</div>
<div class="fail-feedback">비밀번호가 일치하지 않습니다</div>
<div class="fail2-feedback">비밀번호를 먼저 작성하세요</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 2단계 : 닉네임 -->
<div class="row page">
<div class="row">
<h2>2단계 : 닉네임</h2>
</div>
<div class="row left">
<label>닉네임</label>
<input type="text" name="memberNickname"
placeholder="한글 또는 숫자 2~10자" class="form-input w-100">
<div class="success-feedback">멋진 닉네임입니다!</div>
<div class="fail-feedback">닉네임 형식이 올바르지 않습니다</div>
<div class="fail2-feedback">닉네임이 이미 사용중입니다</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 3단계 : 이메일+연락처 -->
<div class="row page">
<div class="row">
<h2>3단계 : 연락 가능한 정보</h2>
</div>
<div class="row left">
<label>이메일</label>
<input type="text" name="memberEmail"
placeholder="test@kh.com" class="form-input w-100">
<div class="fail-feedback">이메일 형식이 잘못되었습니다</div>
</div>
<div class="row left">
<label>연락처</label>
<input type="tel" name="memberContact" placeholder="010XXXXXXXX (- 없이)"
class="form-input w-100">
<div class="fail-feedback">전화번호 형식이 올바르지 않습니다</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 4단계 : 생년월일-->
<div class="row page">
<div class="row">
<h2>4단계 : 생년월일</h2>
</div>
<div class="row left">
<label>생년월일</label>
<input type="date" name="memberBirth" class="form-input w-100">
<div class="fail-feedback">잘못된 날짜를 선택하셨습니다</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 5단계 : 주소 -->
<div class="row page">
<div class="row">
<h2>5단계 : 주소</h2>
</div>
<div class="row left">
<label style="display: block;">주소</label>
<input type="text" name="memberPost" placeholder="우편번호"
class="form-input" size="6" maxlength="6">
<button type="button" class="btn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
<input type="text" name="memberAddr1" placeholder="기본주소"
class="form-input w-100 mt-10">
<input type="text" name="memberAddr2" placeholder="상세주소"
class="form-input w-100 mt-10">
<div class="fail-feedback">모든 주소를 작성해주세요</div>
</div>
<div class="row right">
<button type="button" class="btn btn-prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-next">
<i class="fa-solid fa-arrow-right"></i>
</button>
<button type="submit" class="btn btn-positive">가입하기</button>
</div>
</div>
</div>
</form>
</body>
</html>
join.js
$(function(){
//상태 객체
var status = {
memberId:false,
memberPw:false,
memberPwCheck:false,
memberNickname:false,
memberContact:false,
memberBirth:false,
memberEmail:false,
memberAddress:false,
ok:function(){
return this.memberId && this.memberPw
&& this.memberPwCheck && this.memberNickname
&& this.memberContact && this.memberBirth
&& this.memberEmail && this.memberAddress;
},
};
$("[name=memberId]").blur(function(){
var regex = /^[a-z][a-z0-9]{4,19}$/;
var isValid = regex.test($(this).val());
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
status.memberId = isValid;
});
$("[name=memberPw]").blur(function(){
var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/;
var isValid = regex.test($(this).val());
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
status.memberPw = isValid;
});
$("#password-check").blur(function(){
var pw1 = $("[name=memberPw]").val();
var pw2 = $(this).val();
$(this).removeClass("success fail fail2");
if(pw1.length == 0) {
$(this).addClass("fail2");
status.memberPwCheck = false;
}
else if(pw1 == pw2) {
$(this).addClass("success");
status.memberPwCheck = true;
}
else {
$(this).addClass("fail");
status.memberPwCheck = false;
}
});
$("[name=memberNickname]").blur(function(){
var regex = /^[ㄱ-ㅎㅏ-ㅣ가-힣0-9]{2,10}$/;
var isValid = regex.test($(this).val());
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
status.memberNickname = isValid;
});
$("[name=memberEmail]").blur(function(){
var regex = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
var email = $(this).val();
var isValid = email.length == 0 || regex.test(email);
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
status.memberEmail = isValid;
});
$("[name=memberContact]").blur(function(){
var regex = /^010[1-9][0-9]{7}$/;
var contact = $(this).val();
var isValid = contact.length == 0 || regex.test(contact);
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
status.memberContact = isValid;
});
$("[name=memberBirth]").blur(function(){
var regex = /^(19[0-9]{2}|20[0-9]{2})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
var birth = $(this).val();
var isValid = birth.length == 0 || regex.test(birth);
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
status.memberBirth = isValid;
});
$("[name=memberPost],[name=memberAddr1],[name=memberAddr2]").blur(function(){
//this 사용 불가(확실히 누군지 알 수 없음)
var post = $("[name=memberPost]").val();
var addr1 = $("[name=memberAddr1]").val();
var addr2 = $("[name=memberAddr2]").val();
var isBlank = post.length == 0 && addr1.length == 0 && addr2.length == 0;
var isFill = post.length > 0 && addr1.length > 0 && addr2.length > 0;
var isValid = isBlank || isFill;
$("[name=memberPost],[name=memberAddr1],[name=memberAddr2]").removeClass("success fail");
$("[name=memberPost],[name=memberAddr1],[name=memberAddr2]").addClass(isValid ? "success" : "fail");
status.memberAddress = isValid;
});
//페이지 이탈 방지
//- window에 beforeunload 이벤트 설정
$(window).on("beforeunload", function(){
return false;
});
//- form 전송할 때는 beforeunload 이벤트를 제거
$(".join-form").submit(function(e){
$(".form-input").blur();
if(!status.ok()) {
e.preventDefault();
//return false;
}
else {
$(window).off("beforeunload");
}
});
});
multipage.js
$(function(){
//페이지에 버튼이 포함되어 있으므로 DOM탐색으로 처리
//[1] 첫페이지만 빼고 다 숨김
$(".page").hide().first().show(); //ac페이지 숨기고 처음만 보여주세요
$(".btn-prev").first().remove();
$(".btn-next").last().remove();
//[2] 다음 버튼을 누르면 버튼이 속한 페이지를 숨기고 뒷 페이지 표시
$(".btn-next").click(function(){
$(this).parents(".page").hide().next(".page").show(); //지금 버튼을 숨기고 다음 버튼을 보여주세요
});
//[3] 이전 버튼을 누르면 버튼이 속한 페이지를 숨기고 앞 페이지 표시
$(".btn-prev").click(function(){
$(this).parents(".page").hide().prev(".page").show();
});
});
'jQuery' 카테고리의 다른 글
jQuery06 - 이미지 슬라이더, 텍스트 에디터, 파일 업로드 (0) | 2023.09.13 |
---|---|
jquery05 - 캔버스 태그, group by (0) | 2023.09.12 |
jquery04 - ajax2 (0) | 2023.09.11 |
jQuery03 - ajax (0) | 2023.09.08 |
jQuery01 - input, form, 정규표현식, 회원가입페이지 (0) | 2023.09.06 |