checkbox 이벤트
예시1)
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
#terms {
width: 400px;
margin: 0 auto;
padding: 5px 10px;
border: 1px solid black;
}
h3 {
text-align: center;
}
#agree {
width: 400px;
margin: 0 auto;
text-align: center;
}
#agree div {
margin: 10px;
}
</style>
</head>
<body>
<h1>Checkbox Event</h1>
<hr>
<div id="terms">
<h3>약관</h3>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
</div>
<div id="agree">
<form action="21_submit_event.html" method="post" id="termsForm">
<div>
<input type="checkbox" name="agreeCheck" id="agreeCheck" value="0">
약관에 동의해 주세요.
</div>
<button type="submit" id="btn">다음</button>
<div id="message" style="color: red;"></div>
</form>
</div>
</body>
</html>[script 태그]
$(selector).change(callback) : 선택자로 검색된 태그(입력태그)의 입력값이 변경되는 이벤트가 발생되는 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드
$(selector).is(status) : 선택자로 검색된 태그(입력태그)의 상태를 비교하여 [false] 또는 [true]를 반환하는 메소드
→ input 태그(type 속성값 - checkbox 또는 radio)와 select 태그(option 태그)에서만 사용 가능
//선택자로 검색된 태그를 비활성화 처리되도록 태그 속성값 변경
$("#btn").attr("disabled", "disabled");
$("#agreeCheck").change(function() {
//약관 동의 여부에 대한 상태값을 저장하기 위한 변수
// => 0 : 약관 미동의, 1 : 약관 동의
var check=0;
if($(this).is(":checked")) {//이벤트가 발생된 태그(checkbox 또는 radio)가 선택상태(checked)인 경우
check=1;
//$(selector).removeAttr(name) : 선택자로 검색된 태그의 속성을 삭제하는 메소드
$("#btn").removeAttr("disabled");
} else {
check=0;
$("#btn").attr("disabled", "disabled");
}
$(this).val(check);
});
$("#termsForm").submit(function() {
if($("#agreeCheck").val()==0) {
$("#message").text("약관을 읽고 반드시 동의해 주세요.");
return false;//form 태그 미실행
}
});
예시2)
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>Checkbox Event</h1>
<hr>
<h3>좋아하는 계절을 선택해 주세요.(다중 선택 가능)</h3>
<hr>
<input type="checkbox" id="allCheck">전체 선택(취소)
<div id="checkboxList">
<input type="checkbox" name="session" class="session" value="봄">봄
<input type="checkbox" name="session" class="session" value="여름">여름
<input type="checkbox" name="session" class="session" value="가을">가을
<input type="checkbox" name="session" class="session" value="겨울">겨울
</div>
<button type="button" id="btn">선택완료</button>
<hr>
<div id="displayDiv"></div>
</body>
</html>
[script 태그]
$("#btn").click(function() {
//선택자로 검색된 태그의 자식태그(checkbox) 중 선택된 태그를 반환받아 변수에 저장
// => 변수에 jQuery 객체가 저장된 것을 표현하기 위해 $ 기호 사용
//var $checkList=$("#checkboxList").children(":checked");
var $checkList=$(".session").filter(":checked");
if($checkList.length==0) {//선택된 태그가 없는 경우
$("#displayDiv").text("당신이 좋아하는 계절은 없습니다.");
return;
}
var output="당신은 [";
$checkList.each(function(i) {
//선택된 태그의 입력값을 반환받아 변수에 추가 저장
output+=$(this).val();
if($checkList.length-1 != i) {
//입력값을 구분하기 위한 구분 문자값을 변수에 추가 저장
output+=", ";
}
});
output+="]을 좋아합니다.";
$("#displayDiv").text(output);
});
$(selector).prop(name, value) : 선택자로 선택된 태그(입력태그)의 상태를 변경하는 메소드
→ 입력태그는 input 태그(type 속성값이 checkbox 또는 radio)와 select 태그(option 태그)에서만 사용 가능
$("#allCheck").change(function() {
if($(this).is(":checked")) {
//$("#checkboxList").children().prop("checked", true);
$(".session").prop("checked", true);
} else {
//$("#checkboxList").children().prop("checked", false);
$(".session").prop("checked", false);
}
});
'학원 > 복기' 카테고리의 다른 글
| [jQuery] animate 효과 (0) | 2023.06.14 |
|---|---|
| [jQuery] hide 메소드와 show 메소드 / slideDown 메소드와 slideUp 메소드 / fadeIn 메소드와 fadeOut 메소드 / toggle 메소드 (0) | 2023.06.14 |
| [jQuery] Form 이벤트 / Submit 이벤트 (0) | 2023.06.14 |
| [jQuery] 마우스(mouse) 이벤트 / 키(key) 이벤트 / 스크롤(scroll) 이벤트 (0) | 2023.06.14 |
| [jQuery] Event Handle (0) | 2023.06.13 |
