input 태그의 type이 checkbox 이고 여러 개 있을 경우 카테고리 중 하나만 선택이 되어야 할 때가 있다. 자바스크립트를 통해 해결 할 수 있다.

⭐ 주요 포인트

onclick 시 모든 체크바스를 해제하고 선택 한 체크박스 만 체크되도록 한다.

구현 방법

Html

<div class="category_area">
  <ul class="flex_line">
    <li class="flex_line">
        <input
          type="checkbox"
          name="cate"
          id="all"
          value="all"
          onclick="checkOnlyOne(this)"
          checked
         />
        <label for="all">전체</label>
     </li>
     <li class="flex_line">
        <input
          type="checkbox"
          name="cate"
          id="coffee"
          value="coffee"
          onclick="checkOnlyOne(this)"
         />
        <label for="coffee">커피</label>
     </li>
     <li class="flex_line">
        <input
          type="checkbox"
          name="cate"
          id="juice"
          value="juice"
          onclick="checkOnlyOne(this)"
         />
        <label for="juice">주스</label>
     </li>
     <li class="flex_line">
        <input
          type="checkbox"
          name="cate"
          id="coke"
          value="coke"
          onclick="checkOnlyOne(this)"
         />
        <label for="coke">콜라</label>
     </li>
  </ul>
</div>

Javascript

function checkOnlyOne(element) {
   const checkboxes = document.getElementsByName("cate");

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

   element.checked = true;
}