JavaScript에서 체크박스의 선택된 값을 가져오거나, 선택되어있는 모든 체크박스 값을 가져오는 방법을 소개합니다.
1. 선택된 모든 체크박스 값 가져오기
아래와 같이 선택된 모든 체크박스 값을 가져올 수 있습니다.
querySelectorAll()
으로 선택된checkbox
요소들 가져오기'input[type="checkbox"]:checked'
는 타입이 checkbox이고checked=true
인 요소들을 가져옴
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1" value="value1"> Option 1
</label>
<label>
<input type="checkbox" name="option2" value="value2"> Option 2
</label>
<button type="button" onclick="getCheckboxValues()">Get Checkbox Values</button>
<div id='result'></div>
</form>
<script>
function getCheckboxValues() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
const values = [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
});
// log, 화면 출력
console.log(values);
document.getElementById('result').innerText = values;
}
</script>
</body>
</html>
모든 체크 박스를 선택하고 버튼을 누르면 아래처럼 결과가 출력됩니다.
2. 체크박스 클릭 시, checked 값 확인
아래와 같이 체크박스 클릭 시, 함수를 호출하여 체크박스가 선택되었는지 상태를 확인할 수 있습니다.
getElementById()
으로checkbox
요소 가져오기checked
변수로 checkbox가 체크되었는지 상태 확인
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
<label>
<input id="cb1" type="checkbox" name="option1" value="value1" onclick='isChecked()'> Option 1
</label>
<label>
<input id="cb2" type="checkbox" name="option2" value="value2" onclick='isChecked()'> Option 2
</label>
<div id='result'></div>
</form>
<script>
function isChecked() {
const cb1 = document.getElementById('cb1');
const cb2 = document.getElementById('cb2');
if (cb1.checked) {
console.log("cb1 is checked");
}
if (cb2.checked) {
console.log("cb2 is checked");
}
}
</script>
</body>
</html>
위 코드를 실행하고 체크박스를 누르면 아래와 같이 선택된 체크박스에 대한 로그가 출력됩니다.
cb1 is checked
Loading script...
Related Posts
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set clear() 함수, 모든 값 제거
- JavaScript Set add() 함수
- JavaScript Set delete() 함수, 값 제거
- JavaScript Set has() 함수 (값 존재 여부 확인)
- JavaScript String split() 함수
- JavaScript - 경과 시간 계산 (Elapsed time)
- JavaScript - 실행 시간 측정 방법
- JavaScript - 날짜, 시간 포맷 (Date format)
- JavaScript - slice()로 배열 자르기, 나누기
- Node.js - 파일에 특정 문자열이 포함되어있는지 확인
- Node.js - 특정 패턴과 일치하는 모든 파일 찾기
- Node.js - 디렉토리의 파일 리스트 가져오기
- Node.js - 파일, 디렉토리(하위 파일) 삭제
- Node.js - 파일 이름 변경
- JavaScript - switch 조건문
- JavaScript - 배열의 특정 요소 찾기, Index 찾기
- JavaScript - 특정 값으로 배열 채우기, Array.fill()
- JavaScript - 배열을 객체로 변환, 4가지 방법