자바스크립트 체크박스, 라디오 버튼 체크된 값 가져오기
자바스크립트를 이용하여 체크박스와 라디오 버튼을 다루는 방법에 대해서 알아보겠습니다. 체크박스는 여러 개의 값을 선택할 수 있는 반면 라디오 버튼은 그룹 내에서 하나의 값을 선택하는 것이 특징입니다. 이 글에서는 체크된 체크박스와 라디오 버튼의 값을 가져오는 방법을 다룰 예정입니다.
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. 실행 결과 화면
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. 실행 결과 화면
☞ 자바스크립트를 이용하여 체크박스와 라디오 버튼의 체크된 값을 쉽게 가져올 수 있습니다. 이를 통해 사용자의 선택을 처리하거나 다양한 상황에 따라 동적으로 웹 페이지를 구성할 수 있습니다.
관련 이전 게시물
이 글이 도움이 되셨다면 공유 부탁 드립니다.