checkbox 단일 선택

 웹페이지 작성시 체크박스[input type=checkbox]로 표현된 요소로 라디오[input type=radio]처럼 단일 선택만 허용 시켜야 하는 경우가 있다. 이 경우 간단하게 생각할 수 있는 ui구성은 2가지 정도가 있을 것같다. 라디오와 동일하게 선택시 기 선택된 요소의 체크를 해제하는 방법과 특정 요소를 선택한 상태에서 다른 요소를 선택 했을 시 알럿과 같은 경고를 보여주고 선택이 안되도록 하는 방법이 있을 것 같습니다.

 각 ui별로 장단점이 있을 것 같습니다. radio처럼 동작 시켰을 경우는 별다른 메시지가 없으므로 입력 자체는 편리하게 사용 됩니다만 사용자가 경험에 의해서 복수 선택이 가능하다고 생각할 수 있습니다. 이경우 의식 없이 복수개 선택후 한개만 선택되었다고 오인해 버릴 가능성이 있습니다. 반면 경고를 보여주는 방식을 선택했을 경우에는 유저가 명확하게 인지한 상태에서 입력을 시킬 수 있는 반면 경고 메시지를 보고 닫고 하는 것들이 단일 선택이라는 것을 인지하고 있는 유저에 있어서는 기 체크된 사항을 해제하고 입력해야 하므로 불편함을 느낄 수 있습니다. 입력 받을 항목의 중요도에 따라서 판단해서 선택하는 것이 좋을 것으로 생각합니다. 그럼 jquery를 이용하여 간단하게 구현된 소스를 보도록 할까요?

라디오 요소처럼 동작 소스

동작 데모

-단일체크(input type=radio)에 상응하는 동작

---

복수 선택시 경고

동작 데모

-단일체크 상위와 유사하나 복수 체크시 알럿 경고

위에서 소개한 ui이외에도 편리한 ui가 있을지 모르겠지만 일단 간단하게 구현할 수 있는 방법을 소개해 드렸습니다.
위의 구현을 참고하여 다양한 경우에 응용할 수 있었으면 하는 바람입니다.

※위의 소스 코드는 jquery 1.7.2에서 작성되고 테스트 되었습니다.