radio vs checkbox

나는 input radio를 하나만 선택해야 할 때 사용하고 있었다.
그러던 중 실수로 input radio의 체크할 때 다시 클릭 시 이 체크를 없애는 방법을 찾던 중 내가 radio를 잘못 이해하고 있음을 알게 되었다.

radio -> 성별처럼 꼭 선택해야 하는 필수사항일 때 사용
checkbox -> 선택사항이라면 사용해야 함

radio에 하나만 선택하도록 하는 이유를 설명한 사이트(stackexchange)

그래서 checkbox를 radio처럼 한 개만 처리하는 방법을 알아보았다.
생각보다 검색해도 관련 내용을 찾기가 어려웠고 진행을 해야했기에 그냥 함수로 처리하는 방법을 만들었다.
(나는 img를 클릭해 체크하는 방식을 사용해야 해서 아래처럼 별도의 IMG 태그 선택 시 input을 가리키도록 하는 부분도 별도로 설정해야 했다.)

HTML

  <div class="item__emoji">
    <label>
      <input type="checkbox" id="be1" name="b_emoji" value="love" class="item__emoji">
      <img src="./src/love.png" alt="love emoji">
    </label>
    <label>
      <input type="checkbox" id="be2" name="b_emoji" value="smile" class="item__emoji">
      <img src="./src/smile.png" alt="smile emoji">
    </label>
    <label>
      <input type="checkbox" id="be3" name="b_emoji" value="depressed" class="item__emoji">
      <img src="./src/depressed.png" alt="depressed emoji">
    </label>
  </div>
  <div class="item__emoji">
    <label>
      <input type="checkbox" name="l_emoji" id="le1" value="love" class="item__emoji">
      <img src="./src/love.png" alt="love emoji">
    </label>
    <label>
      <input type="checkbox" name="l_emoji" id="le2" value="smile" class="item__emoji">
      <img src="./src/smile.png" alt="smile emoji">
    </label>
    <label>
      <input type="checkbox" name="l_emoji" id="le3" value="depressed" class="item__emoji">
      <img src="./src/depressed.png" alt="depressed emoji">
    </label>
  </div>
  <div class="item__title">
    <label for="Dinner">
      Dinner
    </label>
    <div class="item__emoji">
      <label>
        <input type="checkbox" name="d_emoji" id="de1" value="love" class="item__emoji">
        <img src="./src/love.png" alt="love emoji">
      </label>
      <label>
        <input type="checkbox" name="d_emoji" id="de2" value="smile" class="item__emoji">
        <img src="./src/smile.png" alt="smile emoji">
      </label>
      <label>
        <input type="checkbox" name="d_emoji" id="de3" value="depressed" class="item__emoji">
        <img src="./src/depressed.png" alt="depressed emoji">
      </label>
    </div>
  

JS

  const inputEmojis = document.querySelectorAll('.item__emoji');
  for (const inputEmoji of inputEmojis) {
    inputEmoji.addEventListener('click', (e) => {
      let currentEmoji = e.target;
      if (e.target.tagName === 'IMG') {
        currentEmoji = e.target.previousElementSibling;
      }
      const currentEmojiId = currentEmoji.id;
      const emojis = document.querySelectorAll(
        `input[name=${currentEmoji.name}]`
      );
      for (const emoji of emojis) {
        if (emoji.id !== currentEmojiId && emoji.checked) {
          emoji.checked = false;
        }
      }
    });

그리고 checkbox의 체크 상자를 없애는 방법은 아래와 같이 설정하면 된다.

.item__emoji [type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

체크박스의 체크 수를 다른 방법으로 제어하는 방법을 알게 된다면 업데이트해야겠다 :)