[Javascript] Checkbox 하나만 선택되도록 설정

연구실 과제를 맡아 하던 중 web 개발까지 맡게된.. 사연이 있어 다시 js에 손대게 되었다..


Checkbox를 활용할 일이 많아 하나씩 알아보도록 하자.


Checkbox는 주로 여러 항목들을 선택할 때 사용된다. 추후에 다중 선택으로 기능을 추가하게 될 것 같아 checkbox로 기능을 구현하기로 했다. 그러나 현재는 하나의 Checkbox만 필요하기에 js를 이용해 하나만 선택되도록 설정하였다.

Javascript

js 코드는 아래와 같다. export가 필요하다면 진행해주면 된다.

function checkOne(element) {
  const checkboxes 
      = document.getElementsByName("checkbox");

  checkboxes.forEach((cb) => {
    cb.checked = false;
  })

  element.checked = true;
}

**document.getElementsByName()** 메소드는 document 내의 checkbox라는 name을 가진 모든 element를 **nodelist** 형태로 반환한다.

그리고 checkboxes.forEach() 를 통해 선택된 checkbox를 false로 설정해 체크를 해제한다.

element가 체크된 경우 즉, 클릭된 경우 true로 바꿔주어 하나의 checkbox만 선택될 수 있도록 한다.

## HTML
간단히 html을 구성하면 아래와 같다.
``` element1 element2 ```
간단히 onclick에 js function을 입력해 동작하도록 설정하면 된다. name을 읽어들여 작동하기 꼭 name을 동일하게 설정해주어야 한다.

import하여 사용하는 경우 script 부분에 아래와 같이 작성하면 된다.

<script type="module">
    import {checkOne} from 'jsPath'

    const checkboxes = document.getElementsByName('checkbox');
        checkboxes.forEach((checkbox) => {
            checkbox.addEventListener('click', (event) => {
                checkOne(event.target);
        });
     });
</script>

이벤트 리스너를 통해 click을 감지하고 모듈을 호출해 작동되도록 한다.