실습(jQuery 체크박스(1))
- 전체 동의 체크박스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 체크박스</title>
</head>
<body>
<form action="" name="myForm">
<div>
<label>
전체 동의
<input type="checkbox" class="all">
</label>
</div>
<div>
<label>
서비스 이용약관 동의
<input type="checkbox" name="term1" class="term">
</label>
</div>
<div>
<label>
정보 수집 동의
<input type="checkbox" name="term2" class="term">
</label>
</div>
<div>
<label>
마케팅 수신 동의
<input type="checkbox" name="term3" class="term">
</label>
</div>
</form>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const $all = $(".all");
const $terms = $(".term")
$all.click(function(){
if($(this).is(":checked")){
$terms.prop("checked", true);
}else{
$terms.prop("checked", false);
}
})
</script>
</html>
![](https://blog.kakaocdn.net/dn/dZFWl6/btrBSCh5nTe/n9kZWXxUDEUDkwnXikmi81/img.png)
![](https://blog.kakaocdn.net/dn/ynTzf/btrBQEakH5z/El7HHEAh4kouPkfOKzoL7k/img.png)
실습(jQuery 체크박스(2))
- 문제
// 하나의 약관이라도 해제가 된다면 전체 동의 체크 해제
// 각 항목이 모두 체크되면 전체 동의 체크
- 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 체크박스</title>
</head>
<body>
<form action="" name="myForm">
<div>
<label>
전체 동의
<input type="checkbox" class="all">
</label>
</div>
<div>
<label>
서비스 이용약관 동의
<input type="checkbox" name="term1" class="term">
</label>
</div>
<div>
<label>
정보 수집 동의
<input type="checkbox" name="term2" class="term">
</label>
</div>
<div>
<label>
마케팅 수신 동의
<input type="checkbox" name="term3" class="term">
</label>
</div>
</form>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const $all = $(".all");
const $terms = $(".term")
$all.click(function(){
if($(this).is(":checked")){
$terms.prop("checked", true);
}else{
$terms.prop("checked", false);
}
});
$terms.on('click', function(){
if(!$(this).is(":checked")){
$all.prop('checked', false);
}
// $('선택자').filter("선택자")
// filter를 통해 전달한 선택자로 걸러낼 수 있다.
// 조건식이 true인 객체만 추출한다.
if($terms.filter(":checked").length == 3){
$all.prop('checked', true);
}
});
</script>
</html>
![](https://blog.kakaocdn.net/dn/dIBhIb/btrBR9t4S2n/kofeAfBYkwqVV2Za3iSb41/img.png)
![](https://blog.kakaocdn.net/dn/NFjzv/btrBT5RuP2Z/7bNUp1EOWGnhKwIyNqsdS0/img.png)
실습(JavaScript를 jQuery로 변경)
1. [Web_JavaScript] 13의 task01.js 변경
let $tempTr;
let tempText;
function confirm(){
// const input = document.getElementById("input").value;
const input = $("#input").val();
// const trs = document.querySelectorAll("tbody tr");
const $trs = $("tbody tr");
let check = false;
if($tempTr){
// tempTr.style.background = "#fff";
$tempTr.css("background", "#fff");
// tempTr.firstElementChild.innerHTML = tempText;
$tempTr.children().first().text(tempText);
}
$.each($trs, function(i, tr){
let $td = $(tr).children().first();
if($td.text() == input){
$tempTr = $(tr);
tempText = $td.text();
$(tr).css("background", "#ef5350");
$td.text("★" + input);
check = true;
}
});
// trs.forEach(tr => {
// let td = tr.firstElementChild;
// if(td.innerHTML == input){
// tempTr = tr;
// tempText = td.innerHTML;
// tr.style.background = "#ef5350";
// td.innerHTML = "★" + input;
// check = true;
// }
// });
if(!check){
alert("다시 시도해주세요.");
}
}
2. [Web_JavaScript] 14의 task02 변경
- task02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자를 한글로 변경</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="task02.css">
</head>
<body>
<div id="round">1</div>
<fieldset>
<legend>숫자를 한글로 변경</legend>
<p id="result">결과 표시 부분</p>
<input type="text" name="input">
<br>
<button id="change">변경</button>
</fieldset>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 추가된 부분 -->
<script src="task02.js"></script>
</html>
- task02.js
// ["공", "일", "이",... , "구"] 배열이 필요하다
// "공일이삼사오육칠팔구"
// 입력받은 정수의 자리수 분리
// 각 자리수 정수가 위 배열의 인덱스번호로 활용
// 변경 버튼 클릭 시 준비한 getResult() 실행
// document.getElementById("change").onclick = getResult;
$("#change").click(getResult);
// 외부에서 사용자가 입력한 숫자를 전달받는다.
function changeToHangle(number){
// const pTag = document.getElementById("result");
const $pTag = $("#result");
// const div = document.getElementById("round");
const $div = $("#round");
let hangle = "공일이삼사오육칠팔구";
let result = "";
// 1보다 작은 실수가 들어왔는 지 체크
let check = false;
// 숫자가 아닌 다른 문자를 작성했을 때
if(isNaN(number)){
// pTag.innerHTML = "숫자만 입력해주세요.";
$pTag.text("숫자만 입력해주세요.")
// div.innerHTML = "4";
$div.text("4");
return;
}
// 실수 중 1보다 작은 값이 들어왔다면,
if(number < 1){
// 영을 먼저 붙여준다.
result += "영";
check = true;
}
// 실수든 정수든 우선 3으로 표기한다.
// div.innerHTML = "3";
$div.text("3");
// 사용자가 입력한 숫자의 자리수만큼 반복한다.
for(let i in number){
if(check){ // 위에서 영을 붙였다면, 공이 붙지 않도록 continue를 사용한다.
check = false;
continue;
}
// 각 자리수를 처음부터 순서대로 접근하여 (number.charAt(i)),
// hangle 문자열의 인덱스로 사용한다.
// 해당 인덱스에는 한글이 있기 때문에 data에 차례로 누적 연결한다.
let data = hangle[number.charAt(i)];
if(!data){ // 마침표(점)가 있을 경우 undefined이기 때문에 false이다.
result += "점"; // undefined를 "점"으로 변경한다.
// div.innerHTML = "2";
$div.text("2");
continue;
}
result += data;
}
// pTag.innerHTML = result;
$pTag.text(result);
}
function getResult(){
// const input = document.querySelector("input[name='input']").value;
const input = $("input[name='input']").val();
changeToHangle(input);
}
'웹 개발 > JavaScript' 카테고리의 다른 글
[Web_JavaScript] 18 (0) | 2022.05.14 |
---|---|
[Web_JavaScript] 17 (0) | 2022.05.13 |
[Web_JavaScript] 16 (0) | 2022.05.12 |
[Web_JavaScript] 15 (0) | 2022.05.11 |
[Web_JavaScript] 14 (0) | 2022.05.10 |