[Javascript] 체크박스 선택된 값 모두 가져오기

Javascript에서 체크박스의 선택된 값을 모두 가져오는 방법에 대해서 알아보겠습니다.

체크박스에서 선택된 값 모두 가져오기
체크박스 선택 시, 선택된 값 출력

체크박스에서 선택된 값 모두 가져오기

HTML

3개의 체크박스가 있고, 그 아래에 버튼이 있습니다. 버튼을 누르면 Javascript에서 체크박스의 선택된 값을 가져와서 화면에 출력하려고 합니다.

<label>
  <input type="checkbox" class="checkbox" value="item1"/> 항목 1
</label>
<label>
  <input type="checkbox" class="checkbox" value="item2"/> 항목 2
</label>
<label>
  <input type="checkbox" class="checkbox" value="item3"/> 항목 3
</label>

<br>
<button id="printButton">선택된 값 출력</button>
<p id="selectedValues"></p>

Javascript

버튼에 클릭 리스너를 등록하여, 버튼이 눌리면 함수가 실행됩니다. 함수에서는 모든 체크박스의 checked 값을 확인하고 체크되어있으면 리스트에 저장하여 화면에 출력합니다.

document.querySelectorAll(".checkbox") : class가 checkbox인 모든 체크박스 요소 찾기
document.getElementById("printButton") : id로 버튼 찾기
document.getElementById("selectedValues") : id로 <p> 요소 찾기

const checkboxes = document.querySelectorAll(".checkbox");
const printButton = document.getElementById("printButton");
const selectedValuesElement = document.getElementById("selectedValues");

printButton.addEventListener("click", function() {
  let selectedValues = [];

  // 모든 체크박스를 순회하면서, checked = true인 체크박스의 value를 리스트에 저장
  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      selectedValues.push(checkbox.value);
    }
  });

  // 저장된 리스트를 화면에 출력
  if (selectedValues.length > 0) {
    selectedValuesElement.textContent = "선택된 값: " + selectedValues.join(", ");
  } else {
    selectedValuesElement.textContent = "선택된 값이 없습니다.";
  }
});

체크박스 선택 시, 선택된 값 출력

체크박스를 선택할 때, 선택된 값을 화면에 출력하는 예제입니다. 이전에 선택된 값은 출력하지 않고, 방금 클릭된 체크박스의 값만 출력합니다.

HTML

3개의 체크박스와 결과 출력을 위한 <p> 요소를 추가하였습니다. onclick에 의해 체크박스가 클릭되면 onCheckBoxClicked 함수가 호출됩니다.

<label>
  <input type="checkbox" value="item1" onclick='onCheckBoxClicked(event)'/> 항목 1
</label>
<label>
  <input type="checkbox" value="item2" onclick='onCheckBoxClicked(event)'/> 항목 2
</label>
<label>
  <input type="checkbox" value="item3" onclick='onCheckBoxClicked(event)'/> 항목 3
</label>

<br>
<p id="selectedValue"></p>

Javascript

체크박스가 클릭되면 onCheckBoxClicked(event)로 체크박스의 이벤트가 전달됩니다.

event.target.checked : 체크박스의 checked 값 (true는 선택됨을 의미)
document.getElementById('selectedValue') : id로 결과를 출력할 요소 찾기
selectedValue.innerText : 텍스트가 화면에 보이도록 설정

function onCheckBoxClicked(event)  {
  let result = '';
  if(event.target.checked)  {
    result = event.target.value;
  }else {
    result = '';
  }

  let selectedValue = document.getElementById('selectedValue');
  selectedValue.innerText = result;
}