728x90

체크박스에 체크하고 삭제하는 글관리 구현 중 전체 체크박스를 체크하는 기능을 구현한다.

 

1. html 코드

                <table class="table caption-top table-bordered table-hover">
                    <caption>List</caption>
                    <thead>
                        <tr>
                            <th class="text-center" width="50" scope="col">
                                <input type="checkbox" onclick="selectAll(this)">
                            </th>
                            <th class="text-center" width="50" scope="col">No</th>
                            <th class="text-center" width="950" scope="col">제목</th>
                            <th class="text-center" width="200" scope="col">작성일</th>
                            <th class="text-center" width="180" scope="col">작성자</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr th:each="board : ${boardList}">
                            <td class="mt-5 text-center" scope="row">
                                <div class="checkbox">
                                    <input type="checkbox" name="boardIdList" th:value="${board.id}">
                                </div>
                            </td>
                            <td class="mt-5 text-center" scope="row" th:text="${board.id}">1</td>
                            <td><a th:text="${board.title}" th:href="@{/board/post(boardId=${board.id})}"
                                    style="text-decoration:none; color:black;">제목</a></td>
                            <td class="text-center" th:text="${#dates.format(board.createDate, 'yyyy/MM/dd HH:mm')}">작성일
                            </td>
                            <td class="text-center" th:text="${board.writer}">작성자</td>
                        </tr>
                    </tbody>
                </table>
  • 체크박스에 onclick 이벤트를 달아준다.

2. 스크립트 코드

    <script>
        function selectAll(selectAll) {
            var checkboxs = document.querySelectorAll(['input[type="checkbox"]'])

            checkboxs.forEach((checkbox) => {
                checkbox.checked = selectAll.checked
            })
        }
    </script>
  • document.querySelectorAll : 모든 체크박스 쿼리를 가져옴
  • this로 체크박스를 받았기 때문에 this체크박스가 체크되면 모든 체크박스가 체크되도록 코드 작성

* 출처 : https://hianna.tistory.com/432

저작자표시

'Web > JAVASCRIPT' 카테고리의 다른 글

[JavaScript] 태그 요소 숨기기 & 나타내기  (0) 2022.01.13
[Jquery] .html() 요소 안의 내용 가져오기 및 바꾸기  (0) 2022.01.11
[Jquery] 체크박스 값 배열에 담기  (0) 2022.01.06
[JavaScript] 날짜 포맷 변경 라이브러리  (0) 2022.01.06
[JavaScript] 빈 문자열 검사  (0) 2022.01.04
728x90

서버에서 Json 형태로 프론트로 넘어오면 날짜 형식이 다음과 같이 변경돼서 날아온다.

"createDate": "Jan 5, 2022, 4:25:48 PM"

원하는 날짜 형식으로 바꿔 보여주고 싶을 때 사용할 라이브러리

https://momentjs.com/

 

Moment.js | Home

Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

momentjs.com

사용법

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  • 스크립트를 추가하고 사용하면된다.
moment(변수).format("YYYY-MM-DD HH:mm:ss")
  • 사용 문법

* 적용 프로젝트

https://black-mint.tistory.com/50

 

[Spring Boot] 댓글 기능 - REST API 규칙 적용

저번에 작성한 댓글 기능 구현 코드를 REST API 규칙에 맞게 수정하도록한다. * 이전 댓글 구현 글 https://black-mint.tistory.com/35 [Spring Boot] Ajax(비동기) 통신으로 댓글 구현 (+ Jquery 사용법) 게시판..

black-mint.tistory.com

 

저작자표시

'Web > JAVASCRIPT' 카테고리의 다른 글

[JavaScript] 체크박스 전체 선택 querySelectAll  (0) 2022.01.07
[Jquery] 체크박스 값 배열에 담기  (0) 2022.01.06
[JavaScript] 빈 문자열 검사  (0) 2022.01.04
[Jquery] 특정 태그 뒤에 새로운 태그 생성  (0) 2022.01.04
[Jquery] 이름으로 태그 불러오기 & 태그 숨기기  (0) 2022.01.04
728x90

1, 다른 태그 값 가져오기

var content = document.getElementById(id).innerText;

2. 사용자가 input 또는 textarea에 작성한 값 가져오기 (버튼 클릭시 실행)

var content = document.getElementById("newComment").value;

 

관련 프로젝트

https://black-mint.tistory.com/35

 

[Spring Boot] Ajax(비동기) 통신으로 댓글 구현 (+ Jquery 사용법)

게시판 댓글을 구현하는 도중 비동기 호출에 대해 알게 됐고, 이를 이용하려면 Ajax를 활용해야 한다는 정보를 얻었다. 비동기란? 비동기의 반대인 동기적 통신의 경우 절차적으로 일을 차례로

black-mint.tistory.com

 

저작자표시

'Web > JAVASCRIPT' 카테고리의 다른 글

[Jquery] 특정 태그 뒤에 새로운 태그 생성  (0) 2022.01.04
[Jquery] 이름으로 태그 불러오기 & 태그 숨기기  (0) 2022.01.04
[JavaScript] 확인창 및 팝업창 띄우기  (0) 2022.01.03
[Jquery] html 태그 바꾸기  (0) 2022.01.03
[JavaScript] Check-box로 경고창 띄우기  (0) 2021.12.20
728x90

회원탈퇴를 진행하는 도중 체크박스로 동의 여부를 받기 위해 체크박스 사용법을 기록

<head>
    ...
   <script type="text/javascript">
        // 체크박스 체크여부 확인
        function CheckForm(secession) {
            var chk=document.secessionForm.check.checked;
    
            if(!chk){
                alert("체크박스를 체크해주세요.");
                return false;
            }
        }
    </script>
</head>

<body>
	<form th:action="@{/account/secession}" method="post" name="secessionForm" onsubmit="return CheckForm(this)">
    	...
        	<div class="checkbox mt-3 mb-3">
			<label>
				<input type="checkbox" name="check" value="agreement"> 정말 탈퇴하시겠습니까?
			</label>
    		</div>
	</form>
</body>
  • form 태그에 name과 onsubmit(js 함수)을 설정
  • form > input 태그의 name 설정
  • script태그로 body 부분에서 정의한 name들로 함수를 정의해서 사용.
  • document.[form태그 이름].[input 체크박스 이름].checked
  • alert : 팝업창
저작자표시

'Web > JAVASCRIPT' 카테고리의 다른 글

[Jquery] 특정 태그 뒤에 새로운 태그 생성  (0) 2022.01.04
[Jquery] 이름으로 태그 불러오기 & 태그 숨기기  (0) 2022.01.04
[JavaScript] 확인창 및 팝업창 띄우기  (0) 2022.01.03
[Jquery] html 태그 바꾸기  (0) 2022.01.03
[JavaScript] 다른 태그 값, 양식 작성값(input, textarea ..)가져오기  (0) 2022.01.03

+ Recent posts

티스토리툴바