1. HTML 코드 작성
먼저, HTML 코드로 체크박스와 텍스트 영역을 구성합니다. 여기서는 7개의 해시태그 체크박스를 예시로 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>해시태그 선택</title>
<style>
.frm_input {
width: 80%;
height: 100px;
}
</style>
</head>
<body>
<table>
<tr>
<th scope="row"><label for="bo_2_subj">해시태그 최대 5가지</label></th>
<td colspan="3">
<div id="checkbox-container">
<input type="checkbox" id="hashtag1" name="hashtags" value="#외식업" onclick="updateTextarea()">
<label for="hashtag1">#외식업</label>
<input type="checkbox" id="hashtag2" name="hashtags" value="#상속 및 증여세" onclick="updateTextarea()">
<label for="hashtag2">#상속 및 증여세</label>
<input type="checkbox" id="hashtag3" name="hashtags" value="#도소매업" onclick="updateTextarea()">
<label for="hashtag3">#도소매업</label>
<input type="checkbox" id="hashtag4" name="hashtags" value="#병의원" onclick="updateTextarea()">
<label for="hashtag4">#병의원</label>
<input type="checkbox" id="hashtag5" name="hashtags" value="#법인전환" onclick="updateTextarea()">
<label for="hashtag5">#법인전환</label>
<input type="checkbox" id="hashtag6" name="hashtags" value="#기타1" onclick="updateTextarea()">
<label for="hashtag6">#기타1</label>
<input type="checkbox" id="hashtag7" name="hashtags" value="#기타2" onclick="updateTextarea()">
<label for="hashtag7">#기타2</label>
</div>
<textarea name="bo_2_subj" id="bo_2_subj" class="frm_input"><?php echo get_text($board['bo_2_subj']) ?></textarea>
</td>
</tr>
</table>
<script>
function updateTextarea() {
var checkboxes = document.querySelectorAll('input[name="hashtags"]');
var selectedHashtags = [];
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
selectedHashtags.push(checkbox.value);
}
});
// 최대 선택 개수 제한
if (selectedHashtags.length > 5) {
alert("해시태그는 최대 5개까지 선택 가능합니다.");
// 선택을 막기 위해 마지막 체크된 박스를 체크 해제합니다.
event.target.checked = false;
return;
}
document.getElementById('bo_2_subj').value = selectedHashtags.join(' ');
}
</script>
</body>
</html>2. JavaScript 코드 작성
HTML 코드와 함께 사용할 JavaScript 코드는 사용자가 체크박스를 선택할 때마다 텍스트 영역을 업데이트하고, 선택된 해시태그의 개수를 제한하는 역할을 합니다.
function updateTextarea() {
var checkboxes = document.querySelectorAll('input[name="hashtags"]');
var selectedHashtags = [];
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
selectedHashtags.push(checkbox.value);
}
});
// 최대 선택 개수 제한
if (selectedHashtags.length > 5) {
alert("해시태그는 최대 5개까지 선택 가능합니다.");
// 선택을 막기 위해 마지막 체크된 박스를 체크 해제합니다.
event.target.checked = false;
return;
}
document.getElementById('bo_2_subj').value = selectedHashtags.join(' ');
}
3. 기능 설명
- HTML 구조: 체크박스와 텍스트 영역을 포함하는 기본적인 HTML 구조를 작성합니다. 체크박스는 해시태그 값을 가지고 있으며, 클릭 이벤트가 발생할 때마다 updateTextarea 함수를 호출합니다.
- JavaScript 함수: updateTextarea 함수는 체크된 모든 체크박스를 찾아 선택된 해시태그를 배열에 추가합니다. 선택된 해시태그가 5개를 초과하면 경고 메시지를 표시하고, 마지막으로 체크된 체크박스를 해제합니다. 선택된 해시태그는 텍스트 영역에 공백으로 구분되어 표시됩니다.
마무리
이번 포스팅에서는 해시태그를 선택할 수 있는 체크박스와 선택된 해시태그를 텍스트 영역에 표시하는 기능을 구현하는 방법을 알아보았습니다. 또한, JavaScript를 사용하여 선택할 수 있는 해시태그의 개수를 최대 5개로 제한하는 방법도 설명했습니다. 이러한 기능은 블로그, 게시판, 쇼핑몰 등 다양한 웹 애플리케이션에서 유용하게 사용할 수 있습니다.
'IT 정보' 카테고리의 다른 글
| PHP로 간단한 페이징 처리 구현하기 (0) | 2024.06.11 |
|---|---|
| MySQL DB 테이블 관리 및 다양한 PHP 팁 (0) | 2024.06.11 |
| 그누보드/영카트 관리자 회원 추가 (0) | 2024.06.10 |
| 모든 체크 박스 선택/해제 기능 구현하기 (전체 선택, 개별 선택) (0) | 2024.06.05 |
| php/그누보드/영카트 이동시 포스트로 데이터 갖고 넘기기 (0) | 2024.06.05 |