input checkbox 하나만 선택

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

 

⭐ 주요 포인트

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

구현 방법

• 하나로 묶을 checkbox는 동일한 name 값을 설정한다.
• checkOnlyOne(this) : 체크박스를 하나만 선택하도록 하는 함수입니다. 이 함수는 체크박스가 클릭되었을 때 호출된다.
• const checkboxes = document.getElementsByName("cate") : name 속성이 "cate"인 모든 체크박스를 가져와서 변수 checkboxes에 할당한다.
• checkboxes.forEach((cb) => { cb.checked = false; }) ****: forEach() 함수를 활용해 모든 체크박스를 순회하여 checked 속성을 false로 설정하여 모든 체크박스를 선택 해제한다.
• element.checked = true : checkOnlyOne함수로 받은 element ( = 클릭 된 체크박스 )만 다시 선택되도록 해당 체크박스의 checked 속성을 true로 설정한다.

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;
}

 

See the Pen checkOnlyOne by pminsun (@pminsun) on CodePen.