자바스크립트/제이쿼리 다중 체크박스 값 가져오기
웹 개발을 하다 보면 사용자가 여러 항목을 선택할 수 있도록 다중 체크박스를 사용하는 경우가 많죠. 예를 들어, 사용자가 선호하는 관심사를 선택하게 하거나, 상품의 특성을 여러 가지 선택할 수 있도록 하는 경우가 있습니다. 이런 경우에는 사용자가 선택한 체크박스의 값을 효율적으로 가져오는 것이 중요합니다.
이번 글에서는 jQuery와 순수 JavaScript를 활용하여 다중 체크박스의 값을 가져오는 방법을 예제를 통해 자세히 살펴보겠습니다. 두 가지 방법 모두 웹 페이지에서 사용자가 선택한 값을 배열에 저장하고, 이를 문자열로 변환하여 화면에 표시하는 예제를 통해 쉽게 따라할 수 있도록 설명해 볼게요.
먼저 jQuery를 사용하는 방법부터 설명할텐데요, jQuery는 간결하고 사용하기 편리한 라이브러리라서 많은 웹 개발자들이 선호하죠. DOM 조작, 이벤트 핸들링, 애니메이션 등을 쉽게 처리할 수 있어 특히 복잡한 작업을 간단한 코드로 해결할 수 있습니다.
반면, 순수 JavaScript는 라이브러리에 의존하지 않기 때문에 더욱 경량화된 코드를 작성할 수 있고, 브라우저 호환성 문제를 줄일 수 있습니다. 최근 몇 년간 JavaScript 자체가 크게 발전하면서, jQuery 없이도 충분히 간결하고 강력한 코드를 작성할 수 있게 되었죠.
이 글을 통해 각 방법의 장단점을 비교하고, 실제로 코드를 작성하는 과정을 상세히 설명하여 여러분이 필요한 상황에 맞는 방법을 선택할 수 있을 겁니다. 또한, 각 코드에 주석을 추가하여 각 부분이 어떤 역할을 하는지 쉽게 이해할 수 있도록 하였으니 초보자라 하더라도 무리 없이 따라할 수 있을 거예요.
jQuery로 다중 체크박스 값 가져오기
HTML 코드
<!DOCTYPE html>
<html>
<head>
<title>Checkbox 다중 선택 예제 - jquery활용</title>
<!-- jQuery 라이브러리 로드 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="form1">
<!-- 체크박스 요소들 -->
<input type="checkbox" name="options" value="사과">사과<br>
<input type="checkbox" name="options" value="딸기">딸기<br>
<input type="checkbox" name="options" value="레몬">레몬<br>
<input type="checkbox" name="options" value="키위">키위<br>
</form>
<!-- 값을 가져오는 버튼 -->
<button id="getValues">선택값 보기</button>
<!-- 결과를 표시할 영역 -->
<div id="result"></div>
<script>
// 문서가 준비되면 실행
$(document).ready(function(){
// 버튼 클릭 이벤트 핸들러
$("#getValues").click(function(){
var selected = []; // 선택된 값을 저장할 배열
// 체크된 체크박스를 찾고 그 값을 배열에 추가
$('input[name="options"]:checked').each(function() {
selected.push($(this).val());
});
// 결과를 텍스트로 표시
$("#result").text("선택한 값 : " + selected.join(", "));
});
});
</script>
</body>
</html>
HTML 코드의 구조
- 체크박스 그룹은 <form> 태그 안에 위치합니다.
- name="options" 속성은 모든 체크박스가 동일한 이름을 공유하게 합니다.
- id="getValues"를 가진 버튼은 클릭 시 체크박스 값을 가져오는 트리거 역할을 합니다.
- id="result"를 가진 <div> 태그는 선택된 체크박스 값을 표시하는 영역입니다.
jQuery 코드
- $(document).ready(function() {...});는 문서가 완전히 로드되었을 때 실행될 코드를 정의합니다.
- $("#getValues").click(function() {...});는 버튼 클릭 이벤트를 처리합니다.
- $('input[name="options"]:checked').each(function() {...});는 체크된 모든 체크박스를 찾습니다.
- selected.push($(this).val());는 각 체크박스의 값을 배열에 추가합니다.
- $("#result").text("Selected values: " + selected.join(", "));는 배열의 값을 문자열로 변환하여 결과를 표시합니다.
순수한 javascript로 다중 체크박스 값 가져오기
HTML 코드
<!DOCTYPE html>
<html>
<head>
<title>Checkbox 다중 선택 예제-javascript 활용</title>
</head>
<body>
<form id="form1">
<!-- 체크박스 요소들 -->
<input type="checkbox" name="options" value="사과">사과<br>
<input type="checkbox" name="options" value="딸기">딸기<br>
<input type="checkbox" name="options" value="레몬">레몬<br>
<input type="checkbox" name="options" value="키위">키위<br>
</form>
<!-- 값을 가져오는 버튼 -->
<button id="getValues">선택값 보기</button>
<!-- 결과를 표시할 영역 -->
<div id="result"></div>
<script>
// 버튼 클릭 이벤트 핸들러 추가
document.getElementById("getValues").addEventListener("click", function() {
var selected = []; // 선택된 값을 저장할 배열
// 체크된 체크박스를 모두 선택
var checkboxes = document.querySelectorAll('input[name="options"]:checked');
// 각 체크박스의 값을 배열에 추가
checkboxes.forEach(function(checkbox) {
selected.push(checkbox.value);
});
// 결과를 텍스트로 표시
document.getElementById("result").innerText = "선택한 값은 : " + selected.join(", ");
});
</script>
</body>
</html>
jQuery 코드
- document.getElementById("getValues").addEventListener("click", function() {...});는 버튼 클릭 이벤트를 처리합니다.
- var checkboxes = document.querySelectorAll('input[name="options"]:checked');는 체크된 모든 체크박스를 선택합니다.
- checkboxes.forEach(function(checkbox) {...});는 선택된 체크박스들을 반복 처리합니다.
- selected.push(checkbox.value);는 각 체크박스의 값을 배열에 추가합니다.
- document.getElementById("result").innerText = "Selected values: " + selected.join(", ");는 배열의 값을 문자열로 변환하여 결과를 표시합니다.
실행결과
'vita_Programing' 카테고리의 다른 글
| Javascript 엘리베이터 동작 시뮬레이션 (0) | 2024.05.28 |
|---|---|
| MSSQL 개별 테이블 사용 용량 확인하는 방법 (0) | 2024.05.27 |
| HTML+CSS 드롭다운 메뉴 튜토리얼 (1) | 2024.05.26 |
| Javascript Input 태그에 추천 입력값 보여주기 (0) | 2024.05.24 |
| 자바스크립트 배열 컨트롤 중급편 2/2 (0) | 2024.05.20 |
