코딩 노트
Javascript03 - 회원가입 검사 코드, 체크박스 본문
.*와 .*? 의 의미는 다르다. ?는 0또는 1이라는 뜻/*는 0이상이라는 뜻
15.join.html <script>
<!-- Javascript 작성 공간 -->
<script>
function checkMemberId() {
var input = document.querySelector("[name=memberId]");
var regex = /^[a-z0-9]{5,20}$/; //따옴표가 아닌 슬래시로 작성
var isValid = regex.test(input.value); //test는 정규표현식 객체만 가질 수 있다.
input.classList.remove("success", "fail", "fail2");
if(isValid) {
//아이디 중복검사 코드 및 성공 실패
input.classList.add("success");
return true; //누가 불러서 검사할 수 있으니까
}
else {
input.classList.add("fail");
return false;
}
}
function checkMemberPw() {
var input = document.querySelector("[name=memberPw]"); //태그에 접근할 수 있는 참조(열쇠, 리모콘) 획득
var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/;
var isValid = regex.test(input.value);
input.classList.remove("success", "fail");
input.classList.add(isValid ? "success" : "fail");
return isValid; //누가 불러서 검사할 수 있으니까
}
function checkMemberPw2() {
var input1 = document.querySelector("[name=memberPw]"); //비밀번호 입력창
var input2 = document.querySelector("#password-check"); //비밀번호 입력 확인창
input2.classList.remove("success", "fail", "fail2");
if(input1.value.length == 0) { //비밀번호 미작성 시
input2.classList.add("fail2");
return false;
}
else if(input1.value == input2.value) { //비밀번호 일치(자바 스크립트는 문자열이어도 비교연산 사용)
input2.classList.add("success");
return true;
}
else { //비밀번호 불일치
input2.classList.add("fail");
return false;
}
}
function checkMemberNickname() {
var input = document.querySelector("[name=memberNickname]");
// var regex = /^[가-힣0-9]{2,10}$/; //단어만 가능
var regex = /^[ㄱ-ㅎㅏ-ㅣ가-힣0-9]{2,10}$/; //초성도 가능
var isValid = regex.test(input.value);
input.classList.remove("success", "fail", "fail2");
if(isValid) {
// +중복검사(추후)
input.classList.add("success");
return true;
}
else {
input.classList.add("fail");
return false;
}
}
function checkMemberEmail() {
var input = document.querySelector("[name=memberEmail]");
var regex = /^(.*?)@(.*?)$/;
//입력값이 아예 없거나, 있다면 조건에 맞을 때
var isValid = input.value.length == 0 || regex.test(input.value);
input.classList.remove("success", "fail");
input.classList.add(isValid ? "success" : "fail");
return isValid;
}
function checkMemberContact() {
var input = document.querySelector("[name=memberContact]");
var regex = /^010[1-9][0-9]{7}$/;
//아예 입력하지 않았거나, 조건에 맞는 경우에 true
var isValid = input.value.length == 0 || regex.test(input.value);
input.classList.remove("success", "fail");
input.classList.add(isValid ? "success" : "fail");
return isValid;
}
function checkMemberBirth() {
var input = document.querySelector("[name=memberBirth]");
var regex = /^(19[0-9]{2}|20[0-9]{2})-(((0[13578]|1[02])-(0[1-9]|1[0-9]|2[0-9]|3[01]))|((0[469]|11)-(0[1-9]|1[0-9]|2[0-9]|30))|((02)-(0[1-9]|1[0-9]|2[0-9])))$/;
var isValid = input.value.length == 0 || regex.test(input.value);
input.classList.remove("success", "fail");
input.classList.add(isValid ? "success" : "fail");
return isValid;
}
function checkMemberAddress() {
var input1 = document.querySelector("[name=memberPost]");
var input2 = document.querySelector("[name=memberAddr1]");
var input3 = document.querySelector("[name=memberAddr2]");
var isBlank = input1.value.length == 0 && input2.value.length == 0 && input3.value.length == 0;
var isFill = input1.value.length > 0 && input2.value.length > 0 && input3.value.length > 0;
//모두 비어있거나 모두 채워져 있을 때 true
var isValid = isBlank || isFill;
input1.classList.remove("success" , "fail");
input2.classList.remove("success" , "fail");
input3.classList.remove("success" , "fail");
input1.classList.add(isValid ? "success" : "fail");
input2.classList.add(isValid ? "success" : "fail");
input3.classList.add(isValid ? "success" : "fail");
return isValid;
}
function checkForm() {
var result1 = checkMemberId();
var result2 = checkMemberPw();
var result3 = checkMemberPw2();
var result4 = checkMemberNickname();
var result5 = checkMemberEmail();
var result6 = checkMemberBirth();
var result7 = checkMemberContact();
var result8 = checkMemberAddress();
return result1 && result2 && result3 && result4 && result5 && result6 && result7 && result8;
}
15.join.html <body>
<body>
<form action="" method="post" autocomplete="off" onsubmit="return checkForm();">
<div class="container w-600">
<div class="row">
<h1>회원 정보 입력</h1>
</div>
<div class="row left">
<label>아이디</label>
<input type="text" name="memberId" placeholder="영문 소문자, 숫자 5~20자"
class="form-input w-100" onblur="checkMemberId();">
<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" onblur="checkMemberPw();">
<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" onblur="checkMemberPw2();">
<div class="success-feedback">비밀번호가 일치합니다.</div>
<div class="fail-feedback">비밀번호가 일치하지 않습니다.</div>
<div class="fail2-feedback">비밀번호를 먼저 작성하세요.</div>
</div>
<div class="row left">
<label>닉네임</label> <i class="fa-solid fa-asterisk red"></i>
<input type="text"name="memberNickname" placeholder="한글 또는 숫자 2~10자"
class="form-input w-100" onblur="checkMemberNickname();">
<div class="success-feedback">멋진 닉네임이네요!</div>
<div class="fail-feedback">닉네임 형식이 올바르지 않습니다.</div>
<div class="fail2-feedback">닉네임이 이미 사용중입니다.</div>
</div>
<div class="row left">
<label>이메일</label>
<!-- 이메일 타입을 eamil로 하면 required를 쓴 것처럼 된다. -->
<input type = "text" name="memberEmail" placeholder="test@kh.com"
class="form-input w-100" onblur="checkMemberEmail();">
<div class="fail-feedback">이메일 형식이 잘못되었습니다.</div>
</div>
<div class="row left">
<label>전화번호</label>
<input type="tell" name="memberContact" placeholder="010XXXXXXXX (대시제외)"
class="form-input w-100" onblur="checkMemberContact();">
<div class="fail-feedback">전화번호 형식이 올바르지 않습니다.</div>
</div>
<div class="row left">
<label>생년월일</label>
<input type="date" name="memberBirth" class="form-input w-100"
onblur="checkMemberBirth();">
<div class="fail-feedback">잘못된 날짜를 선택하셨습니다.</div>
</div>
<div class="row left">
<label style="display: block;">주소</label>
<input type = "text" name="memberPost" placeholder="우편번호" class="form-input"
onblur="checkMemberAddress();" 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" onblur="checkMemberAddress();">
<input type="text" name="memberAddr2" placeholder="상세주소"
class="form-input w-100 mt-10" onblur="checkMemberAddress();">
<div class="fail-feedback">모든 주소를 작성해주세요.</div>
</div>
<div class="row left">
<button type="submit" class="btn btn-positive w-100">가입하기</button>
</div>
</div>
</form>
</body>
16.object.html <script>
<!-- Javascript 작성 공간 -->
<script>
//자바스크립트 객체(Object)
//- 기본적인 브라우저 통제를 위한 내장객체
//- 내가 만들어 쓰는 사용자 객체
function window01() {
//console.log(window);
//window.alert("알림창 출력 완료");
//window 키워드는 생략 가능하다.
alert("알림창 출력 완료");
}
function window02() {
var choice = window.confirm('정말 이동하시겠습니까?');
console.log(choice); //확인(true) / 취소(false)
if(choice) {
}
}
function window03() {
//사용하지 않는 기능
window.prompt("아무거나 입력하세요");
console.log(value);
}
function window04() {
// window.open("주소");
}
function window05() {
//window.open("주소", "ID", "새창 옵션");
//open("https://www.google.com", "_blank", "width=500, height=500"); //무한 새창
//open("https://www.google.com", "win1", "width=500, height=500"); //하나만 열림
//구글은 새창이 타겟팅되지 않음
}
function location01() {
//console.log(window.location);
//console.log(location);
}
function location02() {
//ㄴconsole.log(window.location); //쓸 수 있는 지 없는 지 나온다.
location.reload();
}
function history01() {
//console.log(window.history); 명령들을 확인 가능
history.back(); //history.go(-1);
}
function history02() {
history.go(-2);
}
//document.querySelector()는 가장 위에 있는 1개의 태그를 선택
//document.querySelectorAll()은 해당하는 모든 태그를 선택
function document01() {
// console.log(window.document);
// var tag = document.querySelector("h1"); //원치 않는 결과
// var tag = document.querySelector("#target");
// var tag = document.querySelectorAll(".temp"); // 자바의 배열이다.
// tag.style.color = "red"
var tag = document.querySelectorAll(".temp");
// tag[0].style.color = "red";
for(var i = 0; i < tag.length; i++){
tag[i].style.color = "red";
}
}
//document.getElementById(아이디) - 가장 중요!
//안 되는 브라우저가 없다는 것이 가장 좋은 점이지만 아이디가 있어야 한다는 것이 단점
//document.getElementsByClassName(클래스)
//document.getElementsByTagName(태그명)
function document02() {
var tag = document.getElementById("target"); //아이디는 유일하니까, 무조건 아이디니까 #을 쓰지 않음
tag.style.color = "red";
// var tag = document.getElementsByClassName("temp");
// tag[0].style.color = "red"; //안 쓴다. 이거 쓸 바에 querySelector 사용
}
</script>
16.object.html <body>
<body>
<div class="container w-600">
<div class="row">
<h1>자바스크립트 내장 객체</h1>
</div>
<div class="row left">
자바스크립트 내장객체는 브라우저를 제어하는 것이 목표이며
브라우저의 촤상위 요소가 창(window)이다.
<br>
창을 제어하는 내장객체의 이름은 window이다.
</div>
<div class="row">
<button onclick="window01();">알림창</button>
<button onclick="window02();">확인창</button>
<button onclick="window03();">입력창</button>
<button onclick="window04();">새탭</button>
<button onclick="window05();">새창</button>
</div>
<div class="row left">
location은 window의 하위 객체이며 주소창과 새로고침버튼 등의 정보 및 제어 기능이 존재
</div>
<div class="row">
<button onclick="location01();">구글로 이동</button>
<button onclick="location02();">새로고침</button>
</div>
<div class="row left">
history는 window의 하위 객체이며
방문이력을 관리하며 뒤로 혹은 앞으로 이동 기능이 존재
</div>
<div class="row">
<button onclick="history01();">뒤로가기</button>
<button onclick="history02();">뒤로 2페이지 가기</button>
</div>
<div class="row left">
document는 window의 하위 객체이며
문서를 제어할 수 있는 기능을 가지고 있다.
</div>
<div class="row">
<button onclick="document01();">선택하기(신버전)</button>
<button onclick="document02();">선택하기(구버전)</button>
</div>
<div class="row">
<h1 id="target" class="temp">선택 대상</h1>
<h1 id="target2" class="temp">선택 대상</h1>
</div>
</div>
</body>
<script>
//자바스크립트에서는 배열과 객체를 모두 객체라고 한다.
//- 각각 2종류씩의 생성방법이 존재한다.
//객체는 (1) 생성자 함수 (2) 일회용 객체 방식이 존재
function Student(name, score) {
this.name = name; //미래의 생성될 객체, 주인공
this.score = score;
}
//(1)
var a = new Student("피카츄", 50);
var b = new Student("라이츄", 70);
console.log(a);
console.log(b);
</script>
17.object2.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>
<!-- Javascript 작성 공간 -->
<script>
//자바스크립트에서는 배열과 객체를 모두 객체라고 한다.
//- 각각 2종류씩의 생성방법이 존재한다.
//객체는 (1) 생성자 함수 (2) 일회용 객체 방식이 존재
function Student(name, score) {
this.name = name; //미래의 생성될 객체, 주인공
this.score = score;
}
//(1)
var a = new Student("피카츄", 50);
var b = new Student("라이츄", 70);
console.log(a);
console.log(a.name, a.score);
console.log(b);
console.log(b.name, b.score);
//(2) -이 방식을 많이 씀-
//자바의 map이랑 비슷
var c = {
name : "피카츄",
age : 20
};
var d = {
name : "라이츄",
age : 25
};
console.log(c);
console.log(d);
//배열은 (1) 정적 (2) 동적 방식으로 생성할 수 있다.
//- 생성과 메모리 저장방식이 다를 뿐 자바스크립트 배열은 모두 늘어난다.
//(1) -많이 쓰고 성능도 빠름-
var e = [10, 20, 30];
// e[4] = "hello";
e.push(40); //맨 뒤에 데이터를 추가
console.log(e);
//(2) -이 방식은 흔치 않음-
var f = new Array(100);
console.log(f);
console.log(f.length);
</script>
</head>
<body>
</body>
</html>
18.quiz.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>
<!-- Javascript 작성 공간 -->
<script>
//다음 점수 데이터로 (1)총점, (2)평균, (3) 60점의 예상등수 구하여 출력
var scoreList = [70, 55, 90, 100, 82, 88];
var scoreTotal = 0;
for (var i = 0; i < scoreList.length; i++) {
scoreTotal += scoreList[i];
}
var scoreAvg = scoreTotal / scoreList.length;
console.log("합계 = " + scoreTotal);
console.log("평균 = " + scoreAvg);
console.log("평균 = " + parseInt(scoreAvg));
var rank = 1;
for(var i = 0; i < scoreList.length; i++){
if(scoreList[i] > 60) {
rank ++;
}
}
console.log("60점의 예상등수 = " + rank);
//다음 배열에 1부터 100 사이에서 1의 자리에 3,6,9가 들어간 숫자를 추가
var number369 = [];
for(var i = 1; i < 100; i++){
var ten = parseInt(i / 10) == 3 || parseInt(i / 10) == 6 || parseInt(i / 10) == 9;
var one = i % 10 == 3 || i % 10 == 6 || i % 10 == 9;
// if (1의 자리가 3, 6, 9라면){
if (ten || one) {
number369.push(i);
}
}
console.log(number369);
</script>
</head>
<body>
</body>
</html>
19.checkbox.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>
<!-- Javascript 작성 공간 -->
<script>
//속성명과 값이 같은 속성들은 자바스크립트에서 논리로 관리한다.
//- (ex) checked, selected, required, disabled, readonly
function testCheck() {
var checkbox = document.querySelector("#test");
// var checkbox = document.getElementById("test");
// console.log(checkbox.checked);
var button = document.querySelector("#button");
// if(체크가 되었다면)
// if(checkbox.checked){
// button.disabled = false; //버튼의 비활성화를 해제
// }
// else {
// button.disabled = true; //버튼의 비활성화를 설정
// }
button.disabled = !checkbox.checked; //버튼비활성화를 체크 반대로 설정
}
</script>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>체크박스 제어</h1>
</div>
<div class="row left">
<!-- 라벨로 체크박스를 감싸면 ID가 없어도 타겟팅이 가능 -->
<label>
<input id="test" type = "checkbox" oninput="testCheck();"> <!-- (나중) -->
<!-- <input id="test" type="checkbox" onchange="testCheck();"> (기존) 선호-->
체크박스
</label>
</div>
<div class="row">
<button id="button" disabled>버튼</button>
</div>
</div>
</body>
</html>
20.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>
<!-- javascript 작성 공간 -->
<script>
function checkAgree1(){
var agree1 = document.querySelector("#agree1");
var agree2 = document.querySelector("#agree2");
var agreeAll = document.querySelector("#agree-all");
var nextBtn = document.querySelector("#next-btn");
agreeAll.checked = agree1.checked && agree2.checked;
nextBtn.disabled = !agreeAll.checked;
}
function checkAgree2(){
var agree1 = document.querySelector("#agree1");
var agree2 = document.querySelector("#agree2");
var agreeAll = document.querySelector("#agree-all");
var nextBtn = document.querySelector("#next-btn");
agreeAll.checked = agree1.checked && agree2.checked;
nextBtn.disabled = !agreeAll.checked;
}
function checkAgreeAll(){
var agree1 = document.querySelector("#agree1");
var agree2 = document.querySelector("#agree2");
var agreeAll = document.querySelector("#agree-all");
var nextBtn = document.querySelector("#next-btn");
agree1.checked = agreeAll.checked;
agree2.checked = agreeAll.checked;
nextBtn.disabled = !agreeAll.checked;
}
</script>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>이용약관</h1>
</div>
<div class="row left">
<textarea class="form-input w-100" readonly>dummy text</textarea>
</div>
<div class="row left">
<label>
<input type="checkbox" id="agree1" oninput="checkAgree1();"> 동의합니다
</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" id="agree2" oninput="checkAgree2();"> 동의합니다
</label>
</div>
<hr>
<div class="row left">
<label>
<input type="checkbox" id="agree-all" oninput="checkAgreeAll();"> 모두 동의합니다
</label>
</div>
<div class="row">
<button class="btn btn-positive w-100" disabled
id="next-btn">다음 단계로 이동</button>
</div>
</div>
</body>
</html>
20-1.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>
<!-- javascript 작성 공간 -->
<script>
function refreshCheckbox(tag) {
//<계획>
//1. 체크된 체크박스를 확인
//2-1. 전체가 체크된 경우 개별항목을 모두 체크
//2-2. 개별항목이 체크된경우 전체 체크여부를 확인
//console.log(tag);
//console.log(tag.classList);
//console.log(tag.classList.contains("check-item"));
if(tag.classList.contains("check-all")) {//2-1
var itemList = document.querySelectorAll(".check-item");
var allList = document.querySelectorAll(".check-all");
//tag의 체크 상태에 따라 allList와 itemList를 모두 체크/해제
for(var i=0; i < itemList.length; i++) {
itemList[i].checked = tag.checked;
}
for(var i=0; i < allList.length; i++) {
allList[i].checked = tag.checked;
}
//버튼 처리
var btn = document.querySelector("#next-btn");
btn.disabled = !tag.checked;
}
else if(tag.classList.contains("check-item")) {//2-2
//개별항목이 모두 체크되어 있는지를 알아야 함
//- itemList - 전체 체크박스 목록
//- checkedItemList - 체크된 체크박스 목록
var itemList = document.querySelectorAll(".check-item");
var checkedItemList = document.querySelectorAll(".check-item:checked");
var allChecked = itemList.length == checkedItemList.length;
var allList = document.querySelectorAll(".check-all");
for(var i=0; i < allList.length; i++) {
allList[i].checked = allChecked;
}
//버튼 처리
var btn = document.querySelector("#next-btn");
btn.disabled = !allChecked;
}
}
</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" oninput="refreshCheckbox(this)"> 모두 동의합니다
</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" oninput="refreshCheckbox(this)"> 동의합니다
</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" oninput="refreshCheckbox(this)"> 동의합니다
</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" oninput="refreshCheckbox(this)"> 동의합니다
</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" oninput="refreshCheckbox(this)"> 동의합니다
</label>
</div>
<hr>
<div class="row left">
<label>
<input type="checkbox" class="check-all" oninput="refreshCheckbox(this)"> 모두 동의합니다
</label>
</div>
<div class="row">
<button class="btn btn-positive w-100" disabled
id="next-btn">다음 단계로 이동</button>
</div>
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 카카오지도 api 사용1 - 지도, 마커 (0) | 2023.09.15 |
|---|---|
| Javascript04 - 자바스크립트 최종형태(반복문) (0) | 2023.09.05 |
| Javascript02 - 게시글 작성 (0) | 2023.09.01 |
| Javascript02 - 정규표현식 (0) | 2023.09.01 |
| Javascript01 - 시작 (0) | 2023.08.31 |
'JavaScript' Related Articles
more
