Javascript - 체크박스 선택, 해제 방법

Javascripthtml

Javascript에서 checkbox를 해제하거나 선택하는 방법에 대해서 알아보겠습니다.

1. 체크박스 해제, 선택

HTML

아래와 같이 input으로 checkbox를 만들고, 버튼을 클릭하면 함수를 실행하도록 하였습니다.

<input type="checkbox" id="myCheckbox" checked />
<button onclick="uncheckCheckbox()">체크 해제</button>

Javascript

체크박스 element를 찾고 checked = false로 설정하면 체크박스가 해제되며, true로 설정 시 체크박스가 선택됩니다.

function uncheckCheckbox() {
  const checkbox = document.getElementById("myCheckbox");
  checkbox.checked = false;
}

만약 버튼 클릭 시, 처음 설정된 초기 값으로 변경하고 싶다면 아래와 같이 웹페이지가 실행될 때 체크박스의 checked 값을 저장하고, 버튼을 누를 때 값을 변경하면 됩니다.

const originalCheckboxState = document.getElementById("myCheckbox").checked;

function resetCheckbox() {
  const checkbox = document.getElementById("myCheckbox");
  checkbox.checked = originalCheckboxState;
}

Output:

2. form reset으로 체크박스 초기화

아래와 같이 form과 input으로 체크박스를 만들고, type=reset으로 초기화 버튼을 만들 수 있습니다.

  • input에 checked 입력 시 초기 값이 checked=true이며, checked가 없으면 checked=false
  • 버튼 클릭 시, 처음 설정된 checked 값으로 초기화됨
<form id="myForm">
  <input type="checkbox" name="myCheckbox" checked />
  <input type="reset" value="초기화" />
</form>

Output:

3. querySelectorAll()으로 체크박스 초기화

querySelectorAll()으로 모든 체크박스 element를 찾고 체크를 선택, 또는 해제시킬 수 있습니다.

HTML

3개의 체크 박스가 있고, 초기화 버튼이 있습니다.

<input type="checkbox" id="checkbox1" checked />
<input type="checkbox" id="checkbox2" checked />
<input type="checkbox" id="checkbox3" checked />
<button onclick="resetAllCheckboxes()">모두 초기화</button>

Javascript

버튼을 클릭하면, querySelectorAll()으로 type='checkbox'로 선언된 input element를 모두 찾습니다. forEach()로 찾은 element들을 순회하면서 checked 값을 true 또는 false로 변경합니다.

function resetAllCheckboxes() {
  const checkboxes = document.querySelectorAll("input[type='checkbox']");
  checkboxes.forEach(checkbox => {
    checkbox.checked = true; // 또는 false
  });
}

Output:

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha