JavaScript - Only One Checkbox Checked

Intro...😇

프로젝트를 진행하다보면 체크박스(Checkbox)는 정말 필연적으로 만나게 되는 것 같다.

 

보통 체크박스로 선택한 Value들로 처리를 하는 방식이 많은데 가장 많이 질문하는 것이 다중 선택 후 Check 된 값들의 추출방식이 아닐까 싶다.

 

Checkbox는 기본적으로 다중선택이 가능하다. 5개가 있으면 5개 모두 체크가 가능하고 10개가 있으면 10개 모두 된다.

하지만 10개의 Checkbox중에 오직 한가지만 선택할 수 있도록 해야한다면 과연 어떻게 하면 좋을까?

 

How To Only One Check!?🤔

<input type="checkbox" id="check1" value="Value1" onclick="selectOnlyOne(this.id)" />
<input type="checkbox" id="check2" value="Value1" onclick="selectOnlyOne(this.id)" />
<input type="checkbox" id="check3" value="Value1" onclick="selectOnlyOne(this.id)" />
<input type="checkbox" id="check4" value="Value1" onclick="selectOnlyOne(this.id)" />

제일먼저 type인 checkbox의 input Element를 넣어주고 id를 Setting 해준다.

const selectOnlyOne = (id) => {
  for (var i = 1;i <= 4; i++) {
    document.getElementById("Check" + i).checked = false;
  }
  document.getElementById(id).checked = true;
}

그 후 Input Element에 onClick Attribute을 넣어주고 selectOnlyOne Function을 binding 해준다.

checkbox가 onClick 될 때 마다 클릭 된 Checkbox만 체크가 되고 나머지는 동적으로 checked를 해제해 주면서 다중 체크박스에서 오직 한가지만 클릭이 가능하다.

 

물론 자기자신을 체크할 때는 체크가 해제된다.

 

순수 Javascript로만 사용한 방식이지만 이 방식이 프론트엔드 프레임워크(React.js나 Vue.js 등...)에서도 충분히 활용이 가능하다.