HTML Checkox 하나만 선택되게 하기 - Radio 처럼 사용하기

웹개발을 하다보면 UI에서 Checkbox로 되어 있는 Type을 Radio 버튼 처럼 사용해야 하는 경우가 있습니다.

간단하게 스크립트로 해결 가능하니 많은 부분을 수정해서 시간 할애할 필요가 없습니다.


클릭된 값을 비교해서 클릭된 객체와 일치하지 않는 것들을 체크 해제 하면서 사용이 가능합니다.

  1. function doOpenCheck(chk){
  2. var obj = document.getElementsByName("aaa");
  3. for(var i=0; i<obj.length; i++){
  4. if(obj[i] != chk){
  5. obj[i].checked = false;
  6. }
  7. }
  8. }
  9. <input name="aaa" type="checkbox" value="1" onclick="doOpenCheck(this);">aaa <br />
  10. <input name="aaa" type="checkbox" value="2" onclick="doOpenCheck(this);">bbb <br />
  11. <input name="aaa" type="checkbox" value="3" onclick="doOpenCheck(this);">ccc <br />
* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성

관련 블로그 구경하기

작성자의 다른 포스팅