티스토리 뷰

Javascript

Javascript와 JQuery로 체크박스 선택된 값 가져오기

travelpark 2023. 6. 14. 00:08
반응형

웹에서 가장 많이 필요로 하는 기능 중 하나가 체크박스 선택된 값 가져오는 기능입니다. 이번에는 Javascirpt와 JQuery로 체크박스 선택된 값을 가져오는 법에 대해 알아보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>체크박스 선택된 값 확인</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h3>과일을 선택하세요:</h3>
  <input type="checkbox" id="appleCheckbox" value="apple">
  <label for="appleCheckbox">apple</label><br>
  <input type="checkbox" id="bananaCheckbox" value="banana">
  <label for="bananaCheckbox">banana</label><br>
  <input type="checkbox" id="orangeCheckbox" value="orange">
  <label for="orangeCheckbox">orange</label><br>
  <br>
  <button onclick="getSelectedFruits()">javascript로 선택 확인</button>
  <button onclick="getSelectedJQueryFruits()">jquery로 선택 확인</button>
  <script>
    function getSelectedFruits() {
        var selectedFruits = [];
        // 체크박스 요소들을 가져온다
        var checkboxes = document.querySelectorAll('input[type="checkbox"]');
        // 체크된 체크박스의 값을 배열에 추가한다
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
            	selectedFruits.push(checkboxes[i].value);
            }
        }
        // 선택된 과일을 출력한다
        if (selectedFruits.length > 0) {
            alert("선택된 과일: " + selectedFruits.join(", "));
        } else {
            alert("과일을 선택해주세요.");
        }
    }
	
    function getSelectedJQueryFruits() {
        var selectedFruits = [];
        // 체크된 체크박스의 값을 배열에 추가한다
        $('input[type="checkbox"]:checked').each(function() {
            selectedFruits.push($(this).val());
        });
        // 선택된 과일을 출력한다
        if (selectedFruits.length > 0) {
            alert("선택된 과일: " + selectedFruits.join(", "));
        } else {
            alert("과일을 선택해주세요.");
        }
    }
  </script>
</body>
</html>

이 예제에서는 체크박스로 표현된 세 가지 과일 선택 여부를 확인할 수 있습니다. 먼저 javascript로 만들어진 '선택 확인' 버튼을 클릭하면 getSelectedFruits() 함수에서 체크박스 값을 모두 찾아 배열에 저장한 다음 반복문을 통해 선택된 과일만 별도로 저장해 알림 창으로 출력해줍니다.

체크박스가 체크되면 해당 체크박스 요소의 checked 속성이 true로 설정되기 때문에 if문에 이 속성을 이용해 체크된 값만 뽑아올 수 있습니다. push() 메서드를 이용해 배열을 만들어주고 join 메서드로 문자열로 만들어 알림 창에 데이터를 보여줄 수 있습니다. length 프로퍼티로 선택된 과일이 있는지 확인할 수도 있습니다.

 

jquery를 사용하면 좀 더 간단히 동일한 기능을 실행할 수 있습니다.

 

jquery의 each() 메서드에  $('input[type="checkbox"]:checked') 를 사용하면 체크된 체크박스의 값만 반복적으로 실행해 가져올 수 있습니다. 배열을 만들어줬닥가 문자열로 풀어 알림 창으로 출력해주는 부분은 javascript와 동일합니다. 해당 기능을 응용해 체크박스 값을 다양하게 사용해보시기 바랍니다.

반응형

'Javascript' 카테고리의 다른 글

Javascript와 JQuery에서 엔터키 값 체크하기  (0) 2023.06.28
Javascript와 JQuery로 체크박스 전체선택해제 하기  (0) 2023.06.20
Javascript로 모바일 체크 하는 법(navigator.userAgent)  (0) 2023.06.10
Javascript에서 윈도우 이모지(Windows Emoji) 체크하는 방법  (0) 2023.06.09
Javascript로 iframe에서 부모창 함수 제어하기  (0) 2022.06.16
Javascript 와 JQuery에서 iframe 내부 함수 접근 방법  (0) 2022.06.14
Javascript 와 JQuery 에서 focus()로 포커스 이동하기  (0) 2022.05.24
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함