본문 바로가기
Java Web Programming/3. Servlet

CODE [Servlet] check box 연습 예제

by 파프리카_ 2020. 8. 21.
728x90
반응형


# 문제 1. 선택항목을 보여준다
step5.MovieServlet
string[] : getParameterValues(String name) 이용

< 선택한 영화 >
비밀의 숲
케넷
내부자들

# 문제 2. 체크박스 문제 - js
체크박스를 선택하지 않으면
-> alert : 영화를 선택하세요
-> 전송 X

# 문제 3. 
전체 선택을 누르면 
-> 영화 체크박스가 모두 체크된다.
다시 누르면
-> 영화 체크박스가 해제된다.


HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>체크박스 연습</title>
</head>
<script>
	function checkForm(){
		var flag = false;
		var checkCompArray = document.getElementsByName("movie");
		
		for(var i=0; i<checkCompArray.length; i++){
			if (checkCompArray[i].checked){
				flag = true;
				break;
			}
		}
		
		if (flag === false){
			alert("영화를 선택해주세요.")
		}
		
		return flag;
	}
	
	function changeAllState(){
		var allCheckComp = document.getElementById("allCheck");
		var movieCheckBox = document.getElementsByName("movie");
		
		for (var i=0; i < movieCheckBox.length; i++){
				//allCheckComp.checked = true
				movieCheckBox[i].checked = allCheckComp.checked;
			}

	}
</script>
<body>
<!--
	# 문제 1. 선택항목을 보여준다
	step5.MovieServlet
	string[] : getParameterValues(String name) 이용
	
	< 선택한 영화 >
	비밀의 숲
	케넷
	내부자들
	
	# 문제 2. 체크박스 문제 - js
	체크박스를 선택하지 않으면
	-> alert : 영화를 선택하세요
	-> 전송 X
	
	# 문제 3. 
	전체 선택을 누르면 
	-> 영화 체크박스가 모두 체크된다.
	다시 누르면
	-> 영화 체크박스가 해제된다.
	
-->
<form action="MovieServlet" method="POST" onsubmit="return checkForm()">
	<!--onchange : checkbox 상태가 바뀌면 함수를 실행하게 해준다-->
	<input type="checkbox" id="allCheck" onchange="changeAllState()">전체선택<br>
	<input type="checkbox" name="movie" value="비밀의 숲">비밀의 숲<br>
	<input type="checkbox" name="movie" value="케넷">케넷<br>
	<input type="checkbox" name="movie" value="내부자들">내부자들<br>
	<input type="submit" value="선택">
</form>
</body>
</html>

 

JAVA (servlet)

package step5;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class MovieServlet
 */
public class MovieServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MovieServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//contents type + 한글처리
		response.setContentType("text/html; charset=utf-8");
		
		//request 한글 처리
		request.setCharacterEncoding("utf-8");
		
		PrintWriter out = response.getWriter();
				
		//client가 보낸 정보를 반환받는다. 
		String[] movieArr = request.getParameterValues("movie");
		
		//브라우저에 출력한다.
		out.println("<선택한 영화><br>");
		for (int i = 0; i < movieArr.length; i++) {
			out.println(movieArr[i]+"<br>");
		}
		
		//out 닫기
		out.close();
	}

}

 

XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>webstudy5-form</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>

	<servlet>
		<description></description>
		<display-name>MovieServlet</display-name>
		<servlet-name>MovieServlet</servlet-name>
		<servlet-class>step5.MovieServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>MovieServlet</servlet-name>
		<url-pattern>/MovieServlet</url-pattern>
	</servlet-mapping>
    
</web-app>

웹브라우저 결과

 

 

728x90
반응형