jQuery02 - checkbox, 화면분할

Notice

Recent Posts

Recent Comments

Link

« 2024/06 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Tags more

Archives

Today

Total

관리 메뉴

코딩 노트

jQuery02 - checkbox, 화면분할 본문

jQuery

jQuery02 - checkbox, 화면분할

newbyeol 2023. 9. 7. 10:13

체크박스

체크박스의 이벤트는 셋 중에 하나를 걸면 된다.

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>

<head>

<style>

</style>

$(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>

<input type ="checkbox" class="ck"> 비밀번호 표시

</div>

</div>

</div>

</div>

</body>

</html>

38.policy.html

<!DOCTYPE html>

<head>

<style>

</style>

$(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>

<label>

<input type="checkbox" class="check-all"> 모두 동의합니다

</label>

</div>

<textarea class="form-input w-100" readonly>dummy text</textarea>

</div>

<label>

<input type="checkbox" class="check-item"> 동의합니다

</label>

</div>

<textarea class="form-input w-100" readonly>dummy text</textarea>

</div>

<label>

<input type="checkbox" class="check-item"> 동의합니다

</label>

</div>

<textarea class="form-input w-100" readonly>dummy text</textarea>

</div>

<label>

<input type="checkbox" class="check-item"> 동의합니다

</label>

</div>

<textarea class="form-input w-100" readonly>dummy text</textarea>

</div>

<label>

<input type="checkbox" class="check-item"> 동의합니다

</label>

</div>

<hr>

<label>

<input type="checkbox" class="check-all"> 모두 동의합니다

</label>

</div>

<button class="btn btn-positive w-100" disabled

id="next-btn">다음 단계로 이동</button>

</div>

</body>

</html>

39.multi-page.html

<!DOCTYPE html>

<head>

<style>

.page {

display: none;

}

.page.active {

display: block;

}

</style>

$(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>

</div>

</div>

</body>

</html>

39-1.multi-page.html

<!DOCTYPE html>

<head>

<title>Javascript 실습</title>

<style>

</style>

$(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>

1페이지

</div>

2페이지

</div>

3페이지

</div>

4페이지

</div>

5페이지

</div>

</body>

</html>

40.join.html

<!DOCTYPE html>

<head>

<title>Javascript 실습</title>

<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>

$(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>

</div>

</div>

</div>

<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>

<input type="password" name="memberPw"

placeholder="영문,숫자,특수문자 반드시 1개 이상 포함"

class="form-input w-100">

<div class="success-feedback">올바른 비밀번호 형식입니다</div>

<div class="fail-feedback">잘못된 비밀번호 형식입니다</div>

</div>

<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>

</button>

</button>

</div>

</div>

<input type="text" name="memberNickname"

placeholder="한글 또는 숫자 2~10자" class="form-input w-100">

<div class="success-feedback">멋진 닉네임입니다!</div>

<div class="fail2-feedback">닉네임이 이미 사용중입니다</div>

</div>

</button>

</button>

</div>

</div>

<input type="text" name="memberEmail"

placeholder="test@kh.com" class="form-input w-100">

<div class="fail-feedback">이메일 형식이 잘못되었습니다</div>

</div>

<input type="tel" name="memberContact" placeholder="010XXXXXXXX (- 없이)"

class="form-input w-100">

</div>

</button>

</button>

</div>

</div>

<div class="fail-feedback">잘못된 날짜를 선택하셨습니다</div>

</div>

</button>

</button>

</div>

</div>

<input type="text" name="memberPost" placeholder="우편번호"

class="form-input" size="6" maxlength="6">

</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>

</button>

</button>

</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

'jQuery' Related Articles

코딩 노트

jQuery02 - checkbox, 화면분할 본문

jQuery02 - checkbox, 화면분할

체크박스

'jQuery' 카테고리의 다른 글

티스토리툴바