JavaScript - 선택된 checkbox 값 가져오기

Javascripthtml

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>

모든 체크 박스를 선택하고 버튼을 누르면 아래처럼 결과가 출력됩니다. javascript result

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

codechachaCopyright ©2019 codechacha