반응형
다중 체크박스는 복수의 옵션 값을 선택할 수 있게 도와주는 input 항목입니다.
jQuery 를 통해서 체크박스를 다루는 스크립트를 알아보도록 하겠습니다.
다중 체크박스 (multi-checkbox) 예제는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>다중 체크박스 예시</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>좋아하는 과일을 선택하세요:</h2>
<form id="fruitForm">
<input type="checkbox" name="fruit" value="apple"> 사과<br>
<input type="checkbox" name="fruit" value="banana"> 바나나<br>
<input type="checkbox" name="fruit" value="orange"> 오렌지<br>
<input type="checkbox" name="fruit" value="grape"> 포도<br>
</form>
<button id="submitBtn">선택한 과일 확인</button>
<div id="result"></div>
<script>
// jQuery를 이용하여 체크된 항목 가져오기
$('#submitBtn').on('click', function() {
var selectedFruits = [];
$('input[name="fruit"]:checked').each(function() {
selectedFruits.push($(this).val());
});
// 선택된 과일 출력
$('#result').html('선택한 과일: ' + selectedFruits.join(', '));
});
</script>
</body>
</html>- 체크박스 폼: input 태그를 이용하여 여러 개의 체크박스를 생성합니다. (input type="checkbox") name 속성을 통해 같은 그룹 (name="fruit") 으로 묶어줍니다.
- 선택 확인 버튼: 선택한 항목을 확인하는 버튼을 만듭니다. (button id="submitBtn")
- jQuery 코드: 버튼 클릭 시 선택된 체크박스를 확인하고, 선택된 값들을 가져와 #result 영역에 출력합니다.
사용자가 원하는 과일을 체크한 후 '선택한 과일 확인' 버튼을 클릭하면 선택한 과일 목록이 출력됩니다.
반응형
