FRONT-END/jQuery

[jQuery] jQuery 를 이용해 checkbox, radio 에 checked 속성 넣기

단비_danbee 2020. 10. 14. 12:49

| 출력결과

 

 

| 전체코드

가장먼저, CDN 방식으로 jQuery를 import를 해주고 attr 를 사용해서 checked 속성을 넣어주는것.

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[boardEdit.jsp]</title>
  <style type="text/css">
    *{font-size: 20pt; font-weight: bold; }
    a{font-size: 20pt; font-weight: bold;  text-decoration:none; color:blue ;}
    a:hover{font-size: 24pt; font-weight: bold;   text-decoration:underline; color:green ;  }
  </style>
 <!--------- CDN jquery----------------------------------------------------------------->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function(){
            genderCheck();
            hobbyCheck();
            function genderCheck(){
              var gender = document.getElementById("hgender").value;
              
              if(gender=="woman"){
            	  $(":radio[id='woman']").attr("checked", true);
                  return;
              }
              if(gender=="man"){
            	  $(":radio[id='man']").attr("checked", true);
                  return;
              }
            }

			function hobbyCheck(){
				//1 입력값 : study,game
				var hhobby = document.getElementById("hhobby").value;
				
				//2 문자열 자르기 : stydy  game
				var strArray = hhobby.split(",");
				
				//3 체크해주기
				var i;
				for(i=0; i<5; i++){
					$("input:checkbox[id="+ strArray[i] +"]").attr("checked", true);
				}
		}
     });
        </script>
</head>
<body>
   <!-- boardWrite.jsp -->
   <font color=blue>[boardEdit.jsp]</font> <br>

  <form name="editForm" method="post" enctype="multipart/form-data" action="boardEditSave.do" >
  	  <input type='hidden' name='hobby_idx' value="${dto.hobby_idx}">
      이름: <input type="text" name="name" value="${dto.name}"> <br>
      제목: <input type="text" name="title" value="${dto.title}"> <br>
      내용: <textarea rows="3" cols="20"  name="content">${dto.content}</textarea> <br>
      성별:
      <input type='hidden' id='hgender' value="${dto.gender}">
      <input type="radio" name="gender" id="man" value="man">남자 
      <input type="radio" name="gender" id="woman" value="woman">여자 <br>
      취미:
      <input type='hidden' id='hhobby' value="${dto.hobby}">
      <input type="checkbox" name="hobby" id="game" value="game">게임
      <input type="checkbox" name="hobby" id="study" value="study">공부
      <input type="checkbox" name="hobby" id="ski" value="ski">스키
      <input type="checkbox" name="hobby" id="movie" value="movie">영화 <br>
      파일: <input type="file" name="upload_f"><p>
      현재 설정되어 있는 파일 : <font color='red'>${dto.img_file_name}</font><p>
      
      <input type="submit" value="수정완료">
      <input type="reset" value="지우기">
  </form>  
  
  <p>
  <a href="index.jsp">[index.jsp]</a>
  <a href="boardWrite.do">[게시판등록]</a>
  <a href="boardList.do">[전체출력]</a> 
</body>
</html>
댓글수0