Checkbox 하나만 선택되게 하기

반응형

오늘 업무요청을 받으며 라디오버튼을 체크박스로

변경해달라는 요청을 받았다.

라디오버튼은 이름이 같으면 그중에 하나만 선택되는데..

체크박스는 그렇지 않고 다중 선택이 되는 까닭에..

그냥 바꾸어주면 프로그램상 상당한문제이기도 하고..

업무 요청한곳에서도 다중선택의 문제라기보다는


라디오버튼은 한번 선택하면 그 중에 한가지를 택해야하니..

체크박스로 아무것도 선택 안하는 경우를 염두한거 같다..


서문이 길었는데.. 간단하게 자바스크립트 이벤트를 걸어주었다.


function doOpenCheck(chk){

    var obj = document.getElementsByName("aaa");

    for(var i=0; i<obj.length; i++){

        if(obj[i] != chk){

            obj[i].checked = false;

        }

    }

}


그리고 체크박스에는 onclick 이벤트를 걸어주면 되겠다.


<input name="aaa" type="checkbox" value="1" onclick="doOpenCheck(this);">aaa <br />

<input name="aaa" type="checkbox" value="2" onclick="doOpenCheck(this);">bbb <br />

<input name="aaa" type="checkbox" value="3" onclick="doOpenCheck(this);">ccc <br />



'this' 를 넘겨주어서 클릭되어진 객체의 값을 넘겨주고 'aaa' 로 값을 가져온것과 비교 하면서

클릭된 객체와 일치 하지 않는것들은 체크를 해제해주면 되겠다.



출처: http://canworld42.tistory.com/25 [깨어 있는 세상]

반응형

댓글()