[JS] 체크박스 하나만 선택

코드 결과

 

코드

<label for="first">first</label>
<input type="checkbox" id="first" onclick="clickCheck(this)">

<label for="second">second</label>
<input type="checkbox" id="second" onclick="clickCheck(this)">

<label for="third">third</label>
<input type="checkbox" id="third" onclick="clickCheck(this)">

 

// Javascript

function clickCheck(target) {
    document.querySelectorAll(`input[type=checkbox]`)
        .forEach(el => el.checked = false);

    target.checked = true;
}

반응형

 

코드 풀이

3개의 체크박스 각각에 클릭 이벤트를 걸어주며 클릭 시 clickCheck 함수를 호출합니다.

체크 박스를 체크 시 자기 자신 element를 같이 넘겨줍니다.

 

checkbox 타입을 가진 모든 input의 checked 속성을 false로 바꿔 선택 상태를 해제시켜줍니다.그 후 매게변수로 받아온 체크한 elmeent의 checked 속성만을 true로 바꿔줍니다.