자바스크립트 체크박스, 라디오 버튼 체크된 값 가져오기

자바스크립트 체크박스, 라디오 버튼 체크된 값 가져오기

자바스크립트를 이용하여 체크박스와 라디오 버튼을 다루는 방법에 대해서 알아보겠습니다. 체크박스는 여러 개의 값을 선택할 수 있는 반면 라디오 버튼은 그룹 내에서 하나의 값을 선택하는 것이 특징입니다. 이 글에서는 체크된 체크박스와 라디오 버튼의 값을 가져오는 방법을 다룰 예정입니다.

1. 체크박스(checkbox) 체크된 값 가져오기

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>체크박스 체크된 값 가져오기</title>
</head>
<body>
     <h3>좋아하는 과일:</h3>
     <input type="checkbox" id="apple" value="사과">사과
     <input type="checkbox" id="banana" value="바나나">바나나
     <input type="checkbox" id="orange" value="오렌지">오렌지
     <input type="checkbox" id="melon" value="멜론">멜론
     <button onclick="getCheckedValues()">선택된 값 가져오기</button>

     <script>
          function getCheckedValues() {
               let checkboxes = document.querySelectorAll('input[type="checkbox"]');
               let checkedValues = [];

               checkboxes.forEach(checkbox => {
               if (checkbox.checked) {
                    checkedValues.push(checkbox.value);
               }
               });

               console.log('체크된 값:', checkedValues);
          }
     </script>
</body>
</html>

2. 실행 결과 화면

체크박스(checkbox) 체크된 값 가져오기 예제 실행 결과 화면입니다.

2. 라디오(radio) 버튼 체크된 값 가져오기

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>라디오 버튼 체크된 값 가져오기</title>
</head>
<body>
     <h3>좋아하는 과일:</h3>
     <input type="radio" id="apple" value="사과">사과
     <input type="radio" id="banana" value="바나나">바나나
     <input type="radio" id="orange" value="오렌지">오렌지
     <input type="radio" id="melon" value="멜론">멜론
     <button onclick="getCheckedValue()">선택된 값 가져오기</button>

     <script>
          function getCheckedValue() {
               let radioButtons = document.querySelectorAll('input[type="radio"]');
               let checkedValue;

               radioButtons.forEach(radioButton => {
               if (radioButton.checked) {
                    checkedValue = radioButton.value;
               }
               });

               console.log('체크된 값:', checkedValue);
          }
     </script>
</body>
</html>

2. 실행 결과 화면

라디오(radio) 버튼 체크된 값 가져오기 예제 실행 결과 화면입니다.


☞ 자바스크립트를 이용하여 체크박스와 라디오 버튼의 체크된 값을 쉽게 가져올 수 있습니다. 이를 통해 사용자의 선택을 처리하거나 다양한 상황에 따라 동적으로 웹 페이지를 구성할 수 있습니다.

관련 이전 게시물

위로 스크롤