Today I Learned
JavaScript
1. function
- ํจ์ ์ ์ธ
function ํจ์๋ช ([๋งค๊ฐ๋ณ์ ์ ์ธ]) {
[return ]
}
- ํจ์ ํธ์ถ : ํจ์๋ช ([์ธ์๊ฐ]);
2. event
- ๋ง์ฐ์ค ์ด๋ฒคํธ
- click
- ๋ฑ๋ก : ์ ํ์.addEventListener("์ด๋ฒคํธ๋ช ", ์ต๋ช ํจ์์ ์ธ ๋๋ ํจ์ ํธ์ถ)
JoinCheck JavaScript
- ์ฝ๊ด ๋์ ์ ํํ๊ธฐ
- ์ ์ฒด ๋์ ์ฒดํฌ๋ฐ์ค ์์ฑ
- ์ฝ๊ด์ ๋ชจ๋ ๋์๊ฐ ์ฒดํฌ๋์ด ์์ ๊ฒฝ์ฐ์๋ง Join ๋ฒํผ ๋๋ฅด๋ฉด Join Form์ผ๋ก ์ด๋
๋๋ณด๊ธฐ
const checkAll = document.getElementById("checkAll");
const check = document.getElementsByClassName("check");
checkAll.addEventListener("click", function(){
for(c of check) {
c.checked = checkAll.checked;
}
});
for(ch of check) {
ch.addEventListener("click", function() {
let final = true;
for(c of check) {
if(!c.checked) {
final = false;
}
}
checkAll.checked = final;
});
}
//join form์ผ๋ก ์ด๋ (์ฝ๊ด ๋ชจ๋ ๋์์)
const btn = document.getElementById('btn');
btn.addEventListener("click", function() {
if(checkAll.checked) {
location.href = "./join"
}
})JoinCheck JSP
๋๋ณด๊ธฐ
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<c:import url="../template/header_css.jsp"></c:import>
<link href="../resources/css/joinCheck.css" rel="stylesheet">
</head>
<body>
<c:import url="../template/header.jsp"></c:import>
<h1>Join Check</h1>
<div class="rule-container">
<div class="rule">
์ ์ฒด ๋์<input type="checkbox" id="checkAll">
</div>
<div class="rule">
<fieldset>
<legend>๋์1</legend>
<input type="checkbox" class="check">
</fieldset>
<div></div>
</div>
<div class="rule">
<fieldset>
<legend>๋์2</legend>
<input type="checkbox" class="check">
</fieldset>
<div></div>
</div>
<div class="rule">
<fieldset>
<legend>๋์3</legend>
<input type="checkbox" class="check">
</fieldset>
<div></div>
</div>
<div class="rule">
<fieldset>
<legend>๋์4</legend>
<input type="checkbox" class="check">
</fieldset>
<div></div>
</div>
<div class="rule">
<button id="btn">Join</button>
</div>
</div>
<script src="../resources/js/joinCheck.js"></script>
</body>
</html>
728x90
